Primary nav, how to keep from floating to top

Hi Thierry,

I am using Beans framework, via a child theme, for a site, located at www.southseattlecan.org. I'm really in need of help to understand how to keep the primary nav from floating to the top of the header, when the screen width is greater than 900 pixels or so. The header is using a picture of our iconic Mt. Rainier in the background, and the primary nav floats to the top at greater screen widths, obscuring the mountain. I've tried to remove the 'uk-float-right' class from the 'beans_primary_nav', but it doesn't seem to work with beans_remove_attribute:

beans_remove_attribute( 'beans_primary_nav', 'class', 'uk-float-right');

What is the best way to accomplish my goal?

Thanks for Beans, by the way -- it seems like a great theme, and I'm looking forward to learning as much about it as possible,

Forrest H.

Hi Forrest,

You are using the incorrect markup id in your example, the correct markup id is beans_primary_menu (refer to this reply for more info about finding the correct markup ids). If you want to have your navigation below the logo though, you will have to remove the float on the logo too. Here is the snippet:

beans_remove_attribute( 'beans_site_branding', 'class', 'uk-float-left' );
beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );

Another nice effect is to move the navbar below the header as such:

beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' );
beans_wrap_inner_markup( 'beans_primary_menu', 'example_menu_inner', 'div', array( 'class' => 'uk-container uk-container-center' ) );

Happy coding,