Responsive Header Side Padding

Hi there,

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

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

See below

Hi Brent,

This is the expected behavior. You would need custom CSS to override the default padding on sticky for mobile:

nav#sticky-navigation {
    padding-left: 30px;
    padding-right: 30px;
}

The same goes for the menu padding on desktop:

.menu-bar-items > span.menu-bar-item > a {
    padding-left:0;
    padding-right:0;
}

If you also wish to adjust the menu padding on mobile:

nav#sticky-navigation .menu-toggle {
    padding-left: 0;
    padding-right: 0;
}

button.menu-toggle {
    padding-right:30px;
}

You can also try modifying this through Appearance > Customize > Layout > Primary Navigation: https://share.getcloudapp.com/KouArGk8

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! :)

Okay, I am still struggling. Please watch this Loom video and let me know what I might be able to try to deal with the two issues that I point out in the video. Thanks!

https://www.loom.com/share/95bf39e3950a4c8d8e04a822fb37eae7

Hi Brent,

Can you confirm if the Loom link was uploaded completely? It seems to stop loading at some point.

Hope to hear from you soon. :)

Sorry that Loom video didn't seem to be playing fully the other day. It seems to be okay now. Please try it again and let me know about the two issues I point out in the video. https://www.loom.com/share/95bf39e3950a4c8d8e04a822fb37eae7

Thank you Brent! I was able to watch the video now. With that said, you would need a little custom CSS to achieve the tweaks mentioned.

Here is a code you may try:

nav#generate-slideout-menu.is-open > div {
    padding-left: 30px;
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    nav#sticky-navigation.is_stuck {
    padding-left: 30px;
    padding-right: 30px;
}

nav#sticky-navigation.is_stuck .inside-navigation  .menu-toggle {
    padding-right: 0;
}

nav#sticky-navigation.is_stuck .navigation-branding {
    margin-left:0;
}
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! Kindly let us know how it goes. :)

Great! That CSS appears to have resolved both issues that I brought up in the video! Thanks!

You’re welcome Brent! Glad that worked! Feel free to reach out anytime if you’ll need assistance with anything else. :)