[Resolved] Responsive Header Side Padding

[Brent Wilson]

Possible header side padding issue. Please watch this Loom video to see the issues/questions and let me know your thoughts. Thanks!

https://www.loom.com/share/5e729f6bad8f4701b5fb7708275c9772

[Leo]

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 🙂

[Brent Wilson]

See below

[Fernando]

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! 🙂

[Brent Wilson]

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

[Fernando]

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. 🙂

[Brent Wilson]

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

[Fernando]

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. 🙂

[Brent Wilson]

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

[Fernando]

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

[Author]

Posts