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

[Stephen]

Hi Leo,

There are several things about this website that don’t match what I’m looking for.

First, I would like the content text to align with the nav bar and footer rather than the container.
Secondly, something to notice as well is that this gpsites.co website goes out of line too! At a certain browser size, the logo on the nav bar and the left footer text go out of line with the content container (I would include a screenshot but not sure I can).
Thirdly, I would like the logo and footer elements on my site to have more padding from the edge than on this example site. (see my other website – https://www.cleardesign.studio/about/ as an example of the padding I would like and how I would like it all to line up. The nav bar, footer and content never go out of line on this site.).

I hope this helps provide some clarity. Thanks for your help.

[Leo]

Any chance you can remove your own CSS first and try my solution?

There are several things going on here which is causing the misalignment.

So let’s try this:

– Disable Autopimize

– Remove your own CSS.

– Use the page builder container setting as you are using Elementor:
https://docs.generatepress.com/article/page-builder-container/

When a page builder is used, the best practice is to remove all the theme’s padding and let the page builder handles all the padding requirements.

– Set the footer widget padding to all be the same:
https://docs.generatepress.com/article/footer-padding/

When the above steps are done, this should be the result:
https://www.screencast.com/t/Ls6ZiGb9g

You can see that the theme elements (header/footer) are aligned and the content is still a bit misliagned due to the Elementor padding:
https://www.screencast.com/t/uCaUBTUw9J

If you remove the left padding from that image, then everything should align on the desktop view. Then we can work on the next step.

[Tom]

Screenshots may help make things more clear if the above doesn’t do it. If you take a screenshot of the issue and save it to your computer, you can upload it to your website to get the File URL or upload it to a site like this: https://postimages.org/

Then you can share the URL with us 🙂

[Stephen]

Hi Tom and Leo,

This still doesn’t solve my issue because when you’ve done all the steps above, the nav bar doesn’t align properly on smaller screens (e.g. laptops).

Screenshot shown below is what it looks like on laptops. The logo on the nav bar is too far on the left. The footer bar also needs more padding.
https://postimg.cc/vDH6HrcD

I just want it exactly like it is on https://www.cleardesign.studio/about/. Everything perfectly lines up on all display sizes and is padded so the logo on the nav bar is never up against the side of the screen. Only issue is I set the footer width set to contained on this site and I don’t want to do that on the IN8 Active website. I’m almost certain it will require custom CSS for the nav bar and footer bar.

Thanks again for your ongoing support. Hoping we reach a solution!

[Leo]

I just checked the site and still not seeing the steps being done.

Can we start with that first so I can see the issue and provide the CSS from a clean slate?

Thank you.

[Stephen]

I have updated it now as you have asked. Is it possible to give you a temporary WP login? Perhaps this would make things a bit more efficient?

[Leo]

We can’t make the changes for you unfortunately.

So let’s start with desktop alignment first. Looks like the header and footer are aligned but you also want the content to align correct?

If so that’s because you missed a couple of steps here:
https://generatepress.com/forums/topic/woocommerce-page-container-moving-over-to-the-left-on-large-displays/page/2/#post-1336545

Please make sure

– Use the page builder container setting as you are using Elementor:
https://docs.generatepress.com/article/page-builder-container/

When a page builder is used, the best practice is to remove all the theme’s padding and let the page builder handles all the padding requirements.

and

You can see that the theme elements (header/footer) are aligned and the content is still a bit misligned due to the Elementor padding:
https://www.screencast.com/t/uCaUBTUw9J

If you remove the left padding from that image, then everything should align on the desktop view

Let me know if that works.

[Stephen]

Hi Leo,

Great, I apologise I have done that now.
Only issue now is that, when the browser width is reduced, the logo on the nav bar still gets pushed to the far left side of the screen, and now the main content does too.
https://in8active.com/

Also, some pages don’t use Elementor (e.g. WooCommerce pages) and these now look pretty terrible too due to the lack of padding – https://in8active.com/product-category/men/

It still doesn’t work as nicely as the padding on https://www.cleardesign.studio/

Thanks again,

S

[Leo]

Yup – the whole point of this is to take one step at the time.

Next, add this CSS below:

@media (max-width: 1610px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 50px;
    }
}
.site-logo.mobile-header-logo {
    margin-left: 50px;
}

That should align the header and footer nicely. You will need to configure the content padding with Elementor so it aligns with GP’s header and footer.

Let me know how this works out.

[Stephen]

Thanks Leo,

I’m pretty happy with how it looks now.
Elementor (free version) doesn’t allow me to set content padding in a way that works so I’ve resorted to using the GeneratePress settings instead.

I’m going to mark this as complete now, thanks for your help. I think this is something that lots of other users are likely to want so it would be great if there was an easier way to achieve it. Unless its just me!

[Leo]

No problem 🙂

I really can’t recall seeing other requests for this so some manual tweaking is needed for now.

[Author]

Posts