[Resolved] Responsive Header Side Padding

Home Forums Support [Resolved] Responsive Header Side Padding

Home Forums Support Responsive Header Side Padding

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2165295
    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

    #2165300
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2165301
    Brent Wilson

    See below

    #2165335
    Fernando
    Customer Support

    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! ๐Ÿ™‚

    #2166564
    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

    #2166605
    Fernando
    Customer Support

    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. ๐Ÿ™‚

    #2169181
    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

    #2169265
    Fernando
    Customer Support

    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. ๐Ÿ™‚

    #2169277
    Brent Wilson

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

    #2169331
    Fernando
    Customer Support

    Youโ€™re welcome Brent! Glad that worked! Feel free to reach out anytime if youโ€™ll need assistance with anything else. ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.