[Resolved] Padding issues with navigation bar, footer widgets and footer bar

Home Forums Support Padding issues with navigation bar, footer widgets and footer bar

  • This topic has 25 replies, 3 voices, and was last updated 3 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1330899
    Stephen

    Hello,

    I would like your help with some padding issues on a site I’m working on for a client – in8active.com.

    I have used the following CSS to make the navigation bar padding line up with the container:


    @media
    only screen and (min-width: 760px) {
    .inside-navigation {
    padding-left: 40px;
    padding-right: 35px;
    box-sizing: border-box;
    }
    }

    Unfortunately, a little glitch seems to make it not line up when it reaches a certain viewport size (e.g. on my 24inch monitor the nav bar doesn’t line up with the content but it does on my laptop screen). The footer widgets and bar also don’t line up on large screens but do on my laptop.

    Please help!

    #1331539
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS instead:

    body .main-navigation .inside-navigation.grid-container {
        max-width: 1400px;
    }

    Change the px number to match your Elementor container width.

    You should also be able to do this within the customizer:
    https://docs.generatepress.com/article/container-width/

    #1332219
    Stephen

    Hi Leo,

    Thanks for your help. Afraid this doesn’t quite do what I want.
    I’m happy with how the navigation bar is padded I just want to make the footer line up with the navigation on large displays.

    The code you’ve sent makes the navigation padding too small on smaller viewports (e.g.my laptop screen).

    Sorry if I’m not explaining very clearly..

    How it looks on a laptop screen is exactly what I want it to be like on large monitors too. Unfortunately it just goes all out of line on larger screens.

    #1332911
    Leo
    Staff
    Customer Support

    Can you make sure the inner footer width is set to contained?
    https://docs.generatepress.com/article/footer-layout/

    #1332939
    Stephen

    Hi Leo,
    Yes the inner footer width is definitely set to contained. I have, however, added padding to the nav bar. I just need to get the footer to line up with it on large displays.

    #1332960
    Leo
    Staff
    Customer Support

    Try this:

    .site-footer .footer-widgets-container .inside-footer-widgets {
        padding-left: 30px;
        padding-right: 40px;
    }
    #1332964
    Stephen

    I’ve added that. That makes it line up on large displays but also makes it not line up on small screens. I’ve published it so you can have a look.

    It also makes it not line up with the footer bar below it

    #1332979
    Stephen

    With this code I can get it all to line up on large monitors but then as soon as you make the browser window smaller everything goes out of line completely. It’s driving me crazy! Hope you can help me get to the bottom of this..

    The only thing that gets it to line up on both laptops and large monitors is making the footer width and the inner footer width both ‘contained’ but then it doesn’t look right.


    @media
    only screen and (min-width: 760px) {
    .inside-navigation {
    padding-left: 40px;
    padding-right: 35px;
    box-sizing: border-box;
    }
    }

    @media
    only screen and (min-width: 760px) {
    .site-footer .footer-widgets-container .inside-footer-widgets {
    padding-left: 40px;
    padding-right: 35px;
    }
    }

    @media
    (min-width: 768px) {
    .site-info {
    padding: 20px 20px 0px 100px;
    }
    }

    #1333079
    Leo
    Staff
    Customer Support

    Maybe we are going in the wrong direction.

    Is the goal to have a wider content container width and narrower header/footer widths?

    If so try setting the header/footer width you want using the customizer option:
    https://docs.generatepress.com/article/container-width/

    Then create a layout element for the content container width:
    https://docs.generatepress.com/article/layout-element-overview/#content-1

    Then we can avoid all the CSS.

    #1333670
    Stephen

    I’m afraid this still doesn’t work unfortunately.
    The navigation bar glitches slightly still and goes out of line on large screens. Now that I’ve set the footer padding to line up on large displays, it doesn’t line up on smaller screens.

    It’s all live here – https://www.in8active.com/
    I’m sure there must be an easy way around this I just can’t figure it out. My site was also built with GeneratePress (https://www.cleardesign.studio/) and padding is all good on it. However, I have the footer width set to ‘contained’ which wouldn’t work on IN8 Active site unfortunately.

    #1333679
    Stephen

    Perhaps this issue has something to do with using the sticky nav bar as the header?
    It seems a bit perplexing that lining up the navigation, content and footer is so difficult. I would have thought most users would want that

    #1334449
    Leo
    Staff
    Customer Support

    With your current set up, can you

    – remove your custom CSS:

    – set even padding for the footer widgets.

    Then the two should line up perfectly:
    https://www.screencast.com/t/M6AUOarl

    #1334734
    Stephen

    If I remove the CSS then the padding on the nav bar is almost non-existent on small screens and if I add even padding it is only evenly padded on large displays and as soon as you make the browser size smaller it goes out of line!

    I’m a bit gutted that we haven’t reached a solution..

    #1334736
    Stephen

    I feel like I’ve tried everything but with no good result

    #1334755
    Leo
    Staff
    Customer Support

    I guess I’m a little confused about what the final result you are looking for.

    Usually those elements line up nicely and responsive without any additional CSS.

    Can you take a look at this site and let me know if this is the bahaiour you’d like to see? or something is wrong with this too?
    http://gpsites.co/marketer/

    Thanks for your patience – we will get it resolved.

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