Community Forums › Forums › Archived Forums › Showcase and Feedback › Top Header / Nav Bar Help Needed
- This topic has 5 replies, 2 voices, and was last updated 9 years, 2 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
January 21, 2015 at 10:54 pm #138237walksimplyMember
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.comJanuary 23, 2015 at 2:07 pm #138443Tony @ AlphaBlossomMemberHello,
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 #138824walksimplyMemberThanks 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 #138826Tony @ AlphaBlossomMemberHi 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 #138913walksimplyMemberHere'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 #138927Tony @ AlphaBlossomMemberJust 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
-
AuthorPosts
- The forum ‘Showcase and Feedback’ is closed to new topics and replies.