Outreach theme : menu bar above header?

Community Forums Forums Design Tips and Tricks Outreach theme : menu bar above header?

This topic is: not resolved

This topic contains 11 replies, has 2 voices, and was last updated by  styzer 1 year, 6 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #35692

    styzer
    Participant
    Post count: 97

    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

    #35696

    braddalton
    Participant
    Post count: 10165

    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/


    #35701

    styzer
    Participant
    Post count: 97

    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

    #35709

    braddalton
    Participant
    Post count: 10165

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


    #35710

    braddalton
    Participant
    Post count: 10165

    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.
    [php]
    remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
    add_action( ‘genesis_before_header’, ‘genesis_do_subnav’ );
    [/php]
    Its really quite easy Andre.


    #35715

    styzer
    Participant
    Post count: 97

    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

     

    #35727

    braddalton
    Participant
    Post count: 10165

    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.


    #35765

    styzer
    Participant
    Post count: 97

    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

    #35805

    braddalton
    Participant
    Post count: 10165

    This is part of the default code which is not what you want:
    [php]
    add_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_subnav’ );
    [/php]

    Change that hook location.

    Or remove that code and try this: http://www.studiopress.com/forums/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.


    #36018

    styzer
    Participant
    Post count: 97

    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

    #36021

    braddalton
    Participant
    Post count: 10165

    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?


    #36022

    styzer
    Participant
    Post count: 97

    Thanks Brad,

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

    Thanks!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.