Genesis Menu Item with Float Right, Drops in Chrome

Genesis has a nifty CSS class named .right which when applied to a Menu Item will float that particular item to the right and keep the other menu items to the left. You need to apply the menu items in the correct way for it to work in Chrome.

Applying the Float to Menu Items

genesis-menu-float-right

In Appearance >Menus, make sure in screen options the CSS Classes option is checked.

genesis-menu-class-right

Then apply the class right to the Menu Items you want floated right.

Float Right Issue in Chrome

genesis-float-right-menu-chrome

Not on the same line length

 

If you get an issue in Chrome where by the floated menu breaks out of the menu block to a new line, it is because Chrome sometimes renders the page before the float is applied, subsequent clicks on other pages render the page ok but the initial page load is incorrect.

This doesn’t occur at all like that in Firefox or IE.

How to fix is to reorder the menu items so the floated items go first in the menu list, or float the menu items left.

genesis-menu-right-first

Place the Floated Items first in the menu.

 

genesis-menu-right-restored

Order is restored

 

*Update

Post Genesis 2.1 this native functionality has been removed – but you can add it back in…

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
* Filter menu items, appending either a search form or today's date.
*
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function theme_menu_extras( $menu, $args ) {
//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
if ( 'primary' !== $args->theme_location )
return $menu;
//* Uncomment this block to add a search form to the navigation menu
/*
ob_start();
get_search_form();
$search = ob_get_clean();
$menu .= '<li class="right search">' . $search . '</li>';
*/
//* Uncomment this block to add the date to the navigation menu
/*
$menu .= '<li class="right date">' . date_i18n( get_option( 'date_format' ) ) . '</li>';
*/
return $menu;
}
//source http://my.studiopress.com/snippets/nav-extras/

Leave a Comment