• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Top Header / Nav Bar Help Needed

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Showcase and Feedback › Top Header / Nav Bar Help Needed

Tagged: header / nav / menu formatting issue

  • This topic has 5 replies, 2 voices, and was last updated 10 years, 5 months ago by Tony @ AlphaBlossom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 21, 2015 at 10:54 pm #138237
    walksimply
    Member

    Please visit my site at http://www.outdoorfamiliesonline.com. In the top header nav bar area all looks well initially, but when and if the page is refreshed the top menu / header /nav bar area reformats to an uneven, uncentered look. I did add code to create nav widget and also add css to format, but I must be missing something (or did it wrong. 🙂 Any help is appreciated as I cannot figure out the cause. I notice this happened in Chrome, not IE. Not sure what other browsers or formats are affected. Thanks.

    http://www.outdoorfamiliesonline.com
    January 23, 2015 at 2:07 pm #138443
    Tony @ AlphaBlossom
    Member

    Hello,

    The <aside> widget area should not be inside the

      ...should be:

      
      <ul>
           <li></li>
           <li></li>
      </ul>
      <aside>
           <ul>
                <li></li>
                <li></li>
           </ul>
      </aside>
      

      Then you can adjust your CSS to float the nav left, and the widget area right.

      Hope that helps...have a great weekend!


      Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

    January 28, 2015 at 12:57 am #138824
    walksimply
    Member

    Thanks for your response, Tony. I'm still not quite sure how to fix this.

    I registered the nav widget in functions.php. Here is exactly how the data looks surrounding it. I'm not a developer so I don't quite understand where the HTML issue is caused or would be changed exactly.

    //* Register widget areas
    genesis_register_sidebar( array(
    'id' => 'home-top',
    'name' => __( 'Home - Top', 'magazine' ),
    'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    'id' => 'home-middle',
    'name' => __( 'Home - Middle', 'magazine' ),
    'description' => __( 'This is the middle section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    'id' => 'home-bottom',
    'name' => __( 'Home - Bottom', 'magazine' ),
    'description' => __( 'This is the bottom section of the homepage.', 'magazine' ),
    ) );

    genesis_register_sidebar( array(
    'id' => 'nav-social-menu',
    'name' => __( 'Nav Social Menu', 'your-theme-slug' ),
    'description' => __( 'This is the nav social menu section.', 'magazine' ),
    ) );

    add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 );
    add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 );

    January 28, 2015 at 1:49 am #138826
    Tony @ AlphaBlossom
    Member

    Hi again...the functions posted above are to register the widgets, but you also have to have a function to display the widgets (maybe that's sws_social_icons?).

    It would include something like:

    
    genesis_widget_area( 'nav-social-menu', array(
    		'before' => '<div class="simple-social-icons">',
    		'after'  => '</div>',
    ) );
    

    Without seeing all of code, it's hard to say for sure, but it looks like you're using a filter to insert the widget into the navigation. My guess is the sws_social_icons filter is adding this to the navigation markup, so it's showing the widget inside of the menu-primary ul.

    Can you reply with that function? I think you'll want to use an add_action instead of an add_filter, maybe something like this:

    
    add_action( 'genesis_before_header', 'sws_social_icons' );
    

    Not sure without seeing it, but that's my guess. Don't forget to back things up before doing any changes!


    Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

    January 28, 2015 at 9:18 pm #138913
    walksimply
    Member

    Here's what I have:

    function sws_social_icons($menu, $args) {
    $args = (array)$args;
    if ( 'primary' !== $args['theme_location'] )
    return $menu;
    ob_start();
    genesis_widget_area('nav-social-menu');
    $social = ob_get_clean();
    return $menu . $social;
    }

    January 28, 2015 at 10:48 pm #138927
    Tony @ AlphaBlossom
    Member

    Just fyi, if you used the "code" button before and after your code (you'll see a ` before and after), it will preserve the code and make it easier for others to copy and paste.

    So that's appending the nav-social-menu to the end of the menu, inside the menu wrapper which means it's now part of the menu.

    Remove (or just comment out while testing) these functions/filters:

    
    add_filter( ‘genesis_nav_items’, ‘sws_social_icons’, 10, 2 );
    add_filter( ‘wp_nav_menu_items’, ‘sws_social_icons’, 10, 2 );
    
    function sws_social_icons($menu, $args) {
    $args = (array)$args;
    if ( 'primary' !== $args['theme_location'] )
    return $menu;
    ob_start();
    genesis_widget_area('nav-social-menu');
    $social = ob_get_clean();
    return $menu . $social;
    }
    

    You already have these functions, leave them as is (except change "your-theme-slug" to "magazine":

    
    genesis_register_sidebar( array(
    	'id' => 'nav-social-menu',
    	'name' => __( 'Nav Social Menu', 'your-theme-slug' ),
    	'description' => __( 'This is the nav social menu section.', 'magazine' ),
    ) );
    
    remove_action( 'genesis_after_header', 'genesis_do_nav' );
    add_action( 'genesis_before_header', 'genesis_do_nav' );
    

    Add this function:

    
    add_action( 'genesis_before_header', 'sws_add_header_social_widget' );
    function sws_add_header_social_widget() {
     
    	genesis_widget_area( 'nav-social-menu');
    
    }
    

    Now you will have:

    
    <nav></nav>
    <aside></aside>
    <header></header>
    

    so you can style them using CSS, nav float left, aside float right and that should get you going.
    `


    Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Showcase and Feedback’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble