Padding issues with navigation bar, footer widgets and footer bar

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

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[Leo]

Try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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;
}
}

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[Stephen]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts