Outreach theme : menu bar above header?

[styzer]

Hi all,

Anyone would know how I could setup a menu toolbar above my header? I want to have my social icons there, plus QTranslate language selections. Using the right side of the header actually makes one of the header background disappear.

http://musicmondayca.barefootheart.com/

How can I create a toolbar where I could paste the links and icons links?

Thank you!

Andre

[Brad Dalton]

You can reposition either of the nav menus and then add whatever you like to them. http://my.studiopress.com/snippets/navigation-menus/

Another option is to consider the mega menu. http://wordpress.org/extend/plugins/jquery-mega-menu/

Add social media icons to nav menu http://www.briangardner.com/social-media-icons/

---

Tutorials for StudioPress Themes.

[styzer]

Thanks Brad,

However, using Brian's tutorial and your instructions, all I see is a black bar with text links. And it's under the main navigation. Editing the functions.php file - the code you suggest was already there. Take a look: http://musicmondayca.barefootheart.com/

Did I miss something? I'd like that bar to be all the way at the top of the page. And for me to be able to add items to it as if using a Text widget. Does that make sense?

Regards,

Andre

[Brad Dalton]

Yes i see. So i guess you want the primary blue nav at the top of the page?

---

Tutorials for StudioPress Themes.

[Brad Dalton]

You can reposition the secondary nav menu (thats why i provided the links) and change the CSS to full width like the primary nav CSS or add a third nav menu and hook it into the top of your site.

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

Its really quite easy Andre.

---

Tutorials for StudioPress Themes.

[styzer]

Hi Brad,

I want the black menu on top of everything, and everything else the same.

I tried everything I'm told, maybe there are some important steps missing in the instructions. Hard to guess what's missing when you've never done this. Easy for some, not for everyone... 🙂 I wish it was easy for me, and I have experience with WP, so something isn't complete in the instructions. Without context, it's hard to guess right every time.

But thanks for trying, much appreciated.

Regards,

Andre

 

[Brad Dalton]

Reposition the secondary nav menu using the code i linked to.

Then go into your style sheet and change the CSS for the sub nav so its like the primary nav and extends wull width.

---

Tutorials for StudioPress Themes.

[styzer]

Hi Brad,

What I mean is that that code is already in the functions.php file as is.

<code>/** Reposition the secondary navigation */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_subnav' );</code>

I used Brian's tutorial and did everything he said to do, including inserting the CSS. But the result isn't showing WHERE I want it.

Andre

[Brad Dalton]

This is part of the default code which is not what you want:

add_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_subnav’ );

Change that hook location.

Or remove that code and try this: http://www.studiopress.community/topic/outreach-theme-menu-bar-above-header/#post-35710

If you look at the hook map you'll see the different hook locations.

You'll then need to make the menu full with using your CSS skills. Use Firebug for this.

---

Tutorials for StudioPress Themes.

[styzer]

OK, I think I am starting to get a bit better at this. I am getting the "hook" thing and used a different one to place the secondary menu. I also isolated both primary and secondary in the CSS so they both have different styling.

http://www.musicmonday.ca/

I've tried the header-right hook, and many other variations, but it always gets rid of my background, and pushes everything down. Is there a way to OVERLAY a hook, or create a box which could contain some links, or call to action? That right side of the header is pretty much wasted...

Many thanks!

Andre

[Brad Dalton]

You could remove the header right widget if you don't need it.

If you hook more than one function using the same hook you will have problems unless you add a 3rd parameter to the function for a priority.
Example:

You could use this function, change the hook and position it using CSS. Add HTML or a colored content box. http://www.studiopress.com/design/colored-content-boxes-buttons.htm

I tested this on Outreach locally and it displayed both the header right widget content and the HTMl from the custom code above. Position it using CSS or a different hook.

Where exactly do you want these links or box or call to action?

---

Tutorials for StudioPress Themes.

[styzer]

Thanks Brad,

I would like to have them in the space right of the logo...

Thanks!

[Author]

Posts