[Resolved] Padding Header / Navigation Menu

[Austin]

Hi,

How can I adjust the left and right padding for the header / navigation menu when using “use navigation as header”? It takes away the padding options. Also mobile as well as it inherits the desktop padding.

Thanks,

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Austin]

golfhomesflorida.com

[Elvin]

Hi Austin,

When you enable “use navigation as header” option, the padding used by the Navigation is the one set on Appearance > Customize > Layout > Container. It uses the Content padding values.

But the problem is, it shares the setting with the page content’s padding.

If you wish to assign separate padding for the Navigation Header, we’ll have to do it with custom CSS.

That said, Can you specify which part of the header you want to place padding on?

[Austin]

Hey Elvin,

Yeah understood. I like the layout options when not using “use navigation as header” but then it creates a “search box” with a blue outline on mobile when the search icon is engaged and doesn’t look right. Using “use navigation as header” seems to be the only way to get around that issue on mobile.

I just want to be able to adjust the padding on the left of the logo and the right of the main menu. It is to spread out and I want to bring both sides back in slightly.

Thanks

[Ying]

Hi Austin,

In this case, try this CSS:

@media (max-width: 800px) {
    .inside-navigation {
        padding-left: 20px;
        padding-right: 20px;
    }
}

Please be noted that the 800pxis to match the mobile break point you set in the customizer.

[Austin]

Hi Ying, I tried that but there was no change in padding. Thanks

[Ying]

Just to make sure you are trying to add paddings to the header on mobile?

I don’t see it’s been added to your site, the CSS should work:
https://www.screencast.com/t/dCQU4hsx

Do you have any cache plugins activated? If so, could you clear the cache after the CSS is added?

Let me know if I miss anything 🙂

[Austin]

Hey Ying, I am trying to add padding to the desktop version.

[Austin]

The CSS has been added in the “Customize” Additional CSS area

[Ying]

Ah sorry I missundertood your question, in this case, the CSS should be this:

@media (min-width: 801px) {
    #site-navigation .inside-navigation {
        padding-left: 20px;
        padding-right: 20px;
    }
}

[Austin]

No problem Ying. That worked. Thanks

[Ying]

You are welcome 🙂

Glad it worked!

[Geoffrey A.]

Hi, thanks for the CSS info. It works great. Could you tell me how to make it work also when activating the sticky navigation?

[Ying]

Hi Geoffrey,

You can try replacing #site-navigation .inside-navigation with #site-navigation .inside-navigation, #sticky-navigation .inside-navigation

[Author]

Posts