[Support request] Primary Navigation Logo Alignment

[Jefri]

Hello,
In my site, I use a static + sticky navigation. https://majedesigns.com.au/home/

By default, my primary navigation logo is aligned just to the left of the Primary navigation menu.

I want the logo ALIGNED to the left of the SCREEN. This will mean there is a large gap in between my logo and primary menu.

So I used this CSS:
.main-navigation .navigation-logo img {
height: auto;
position: left;
margin-right: 250px;

}

However it is still not aligning correctly. Worse thing is that when I load it on mobile the alignment is now distorted. How can I align my primary navigation logo to the left of the screen and not affect the mobile view?

Thanks.

[Leo]

Hi there,

First remove the CSS you’ve added.

Set Header Alignment to left:
https://docs.generatepress.com/article/header-layout/#header-alignment

Navigation to float right:
https://docs.generatepress.com/article/navigation-location/

Then this CSS:

.nav-float-right .inside-header .main-navigation {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

[Jefri]

Hi Leo,
Thanks for the prompt reply.

The logo and navigation is now aligned to the left side of the screen. Can there be a gap between the logo and the primary navigation? How do I control this? thanks.

[Leo]

Wait so did you want the large gap?

Like the look without the CSS I provided?

[Jefri]

Hi Leo,
Yes like the header in this website:

https://www.slinkywebdesign.com.au/

[Leo]

Oh that case you don’t need the CSS, just set the inner header width to contained: https://docs.generatepress.com/article/header-layout/#inner-header-width

[Jefri]

Hi Leo,
I see. So I turned inner header width to ‘contained’ and used my old CSS:

.main-navigation .navigation-logo img {
height: auto;
position: left;
margin-right: 300px;

}

So in full screen there is that gap between the navigation and logo. The only thing I noticed is that when you reduce the screen size in the browser, the navigation moves below the logo. Is it possible for the logo and navigation to stay in one line even though I reduced the browser screen size?

Hope that makes sense thanks.

[Leo]

Shouldn’t need that CSS.

Once the inner header width is set to contained, you can adjust the distance between them by the container width: https://docs.generatepress.com/article/container-width/

[Jefri]

Hi Leo,
Thanks for your help.

Adjusting the container width in the customiser shifts the whole Primary Nav Logo AND Primary Nav menu to the right and left.

Sorry, am I missing something here??

[Leo]

Yup that’s correct. That is exactly how to achieve the page you linked.

They are using 1160px.

[Jefri]

Thanks Leo,
I got it working. I changed the primary navigation to ‘below header’ and it worked. So strange.

[Leo]

You’re welcome!

[Author]

Posts