Top Header / Nav Bar Help Needed

[walksimply]

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

[Tony @ AlphaBlossom]

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

[walksimply]

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 );

[Tony @ AlphaBlossom]

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

[walksimply]

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;
}

[Tony @ AlphaBlossom]

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