[Support request] Header & Menu Alignment

[Rob]

I have a small problem with the Logo and Primary navigation menu alignment in the header.

Logo and Menu are inline, I want to position the menu to the left with the logo but when I float menu left it swaps places with the logo. So the menu is now on the left but the logo is on the far right.

Logo is set to float left, menu is set to Alignment Left but setting menu to float left is what causes the behaviour I don’t want.

Is this a bug or possibly by design ?

[Tom]

Hi Rob,

This is by design.

So you’re wanting the logo, then the navigation floating to the right, but directly next to the logo?

[Rob]

Hi Tom,

No I need them both floating left, with the menu beside the logo.

I make alot of sites with say only 3 items in the menu, so it looks visually better to have them beside the logo instead of a huge white gap when you float the menu right.

Make sense ? I might not be explaining this very well.

[Tom]

You could try adding this PHP:

add_action('after_setup_theme','generate_float_navigation_below');
function generate_float_navigation_below()
{
	remove_action( 'generate_before_header_content', 'generate_add_navigation_float_right', 5 );
	add_action( 'generate_after_header_content', 'generate_add_navigation_float_right', 5 );
}

Then this CSS:

.nav-float-right .main-navigation,
.site-logo {
    float: left;
    clear: none;
}

This assumes your logo is set to float right.

Adding CSS: https://generatepress.com/knowledgebase/adding-css/
Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[Rob]

Hey Tom,

Thanks for posting this, I’ll give it a try later today.

One thing I did figure out though was why setting menu alignment to left doesn’t do anything when the menu is inline with the logo. It doesn’t have a width set.

When I add a width to the menu (container size – logo width = max menu width) it then aligns the menu items to the left like I want them.

[Tom]

Ah, glad you got that working.

Let me know how the code does 🙂

[Author]

Posts