Nav bar customization in Centric

[stinkykong]

I'm stumped.
http://tcgihost.com/~fumcdent/
The primary navigation is too long to reside in the header (to the right of the logo) and the client wants a dark background bar to span the entire page behind the primary navigation menu. I can't figure out how to keep the navigation visible when scrolling down the page AND to have its background color span the full width.

So I've been working on the primary navigation in two areas to see what can work best. Does anyone know how I can get the primary navigation bar into a container that spans the full width while remaining visible when scrolling down the page?

I have tried to hook the primary nav bar into the header but it only goes inside .site-header .wrap (like what I already have) and that is restrained to the the site's width. Can you hook it specifically after the wrap? Any other ideas?

---

Web Design by Websentia Web Services
http://websentia.com

http://tcgihost.com/~fumcdent/

[Robin]

I haven't used Centric, but you can move your primary navigation so that it is before the header (it will be outside of the header area completely).

How that will work with the shrinking header is another question, so you may be looking at some work with that. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[stinkykong]

Thanks, Robin. I have (or had) two similar nav bars, trying to get either to do what I needed. I actually just figured out a solution and am still putting some finishing touches on it. Using javascript, actually the same javascript that adds a new class to .site-header, to add a new class to .nav-primary which I called .downBoy. I changed the position of .nav-primary to fixed and adjusted its top value with and without the added class of .downBoy.

It's working somewhat and getting better as I go.

Thanks

$(window).scroll(function () {
	  if ($(document).scrollTop() > 1 ) {
	  if ($(document).scrollTop() > 1 ) {
	    $('.nav-primary').addClass('downBoy');
	  } else {
	    $('.nav-primary').removeClass('downBoy');
	  }	  
	});

---

Web Design by Websentia Web Services
http://websentia.com

[csbeck]

Hey Stinkykong, looks like you're getting close with your navigation and header.
I'm trying to do something similar:
http://histogenics.beckerstudio.com/

I've not finished mine - as you can see there are two sets of navigation (one is the primary (in the back) and one is the top-right header widget with a nav menu). I'm trying to make my navigation work like this:
http://www.histogenics.com
Yes the sites are the same - we're converting their existing site to WordPress.

Anyway, I believe that I could make my header and primary nav work and style it the way I want if I could get them to be in a contained div. Everything I've tried either puts the nav above or below the header and not within a containing div (so I can keep them both visible all the time at the top of the page).

How did you get yours to have this structure?

<div class="head-wrap">
    <div class="head-wrap-inner">
      <header class="site-header"></div>
      <nav class="nav-primary"></div>
    </div>
</div>

I think if I could do this, then I could do what I need to do.

Thanks! Chris

[csbeck]

Nevermind Stinkykong. I found the answer. Not sure why this didn't work before because I thought I tried it. Guess not.

For anyone who is interested, here's how I wrapped the header and nav and positioned the primary nav after the header. This is so I could keep the header and primary nav at the top of the screen and apply standard child theme responsive styling (for Enterprise Pro).

Use Genesis Simple Hooks and make these changes:
Header Hooks Section
genesis_before_header Hook
add the code:
<div class="header-nav-wrap">

genesis_after_header Hook
add the code:
</div>

Then add this to the functions.php to reposition the primary navigation:

//* Reposition the primary navigation menu
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav' );

This worked for me anyway. Now I just have to finish my styling.

[Author]

Posts