- This topic has 14 replies, 5 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
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,
Customer Support
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know 🙂
Customer Support
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?
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
Customer Support
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.Hi Ying, I tried that but there was no change in padding. Thanks
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/dCQU4hsxDo 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 🙂
Hey Ying, I am trying to add padding to the desktop version.
The CSS has been added in the “Customize” Additional CSS area
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; } }No problem Ying. That worked. Thanks
You are welcome 🙂
Glad it worked!
Hi, thanks for the CSS info. It works great. Could you tell me how to make it work also when activating the sticky navigation?
Hi Geoffrey,
You can try replacing
#site-navigation .inside-navigationwith#site-navigation .inside-navigation, #sticky-navigation .inside-navigation
- You must be logged in to reply to this topic.
