[Resolved] Adjusting the Navigation Container area

[Benjamin]

Hi! I’m moving a client’s WordPress site over to GeneratePress in order to get the more advanced Blog features, among other things, and I’m having difficulty replicating the other theme’s (Shapely, by Colorlib) navigation inner container settings… Essentially, what I want to do is make the navigation fit inside the same “container” as the main content.

While I know they are technically in the same container, and the main content is being adjusted by the content padding rule, what I want to do is make that rule also apply to my navigation’s inner container, or possibly apply a padding around everything on the site and set the container padding to 0px. Hopefully, that all makes sense.

For some reason, the website URL field refuses to acknowledge that I’ve entered anything, so my client’s current site is thekruegfam.org and my personal testing site currently on GeneratePress is intelligentdesign.x10host.com.

Thank you!

[Leo]

Hi there,

We could try adjusting the navigation container to the normal container size minus left + right padding.

Try this CSS:

@media (min-width:1120px) {
    body .inside-navigation.grid-container {
        max-width: 1120px;
    }
}

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

Let me know if this works.

[Benjamin]

Thanks! That works on Safari on my iMac, but not on Safari or Chrome on my iPad with landscape orientation. (when it is looking at the desktop view of the site.) Additionally, my nav bar’s container isn’t changing on Android devices looking at the desktop site on Chrome.

Anything else/other code that we can try to make sure all devices will look the same?

Thanks again!

[Leo]

Can you try the edited code?

[Benjamin]

The edited code had no effect on either browser on my iPad or on my Android device.

iMac still works though!

[Tom]

It seems the URL you provided isn’t working anymore – can you check? I should be able to spot the issue 🙂

[Benjamin]

Odd… Both links are working for me… In anycase, here you go!

http://intelligentdesign.x10host.com – GeneratePress testing site
http://thekruegfam.org – Current client site

[Benjamin]

Just thought of what might have happened to you… You may occasionally get a “server is busy” or “unable to contact the server” message on the testing site. If you get this message, waiting a few seconds and refreshing the page should get you through to the site.

This is a hosting issue, but as it is a testing site and isn’t meant to have a lot of traffic on it, I’m just living with it for now!

[Tom]

I wonder if this would work better:

#site-navigation .inside-navigation {
    padding: 0 40px;
    box-sizing: border-box;
}

[Benjamin]

Thanks Tom!

That worked for desktop, but as my container padding was 40px on a desktop and only 30 on mobile, it didn’t look quite right on my iPad and phone. Don’t worry though, once I knew the code was working, I remembered your documentation on Responsive Display and targeted other devices with a different padding, so it is working and looking wonderful now!

Here’s the code I used in case I did something wrong…

@media (max-width: 768px) {
/*Phones*/
	#site-navigation .inside-navigation {
    padding: 0 20px;
    box-sizing: border-box;
	}

}

@media (min-width: 769px) and (max-width: 1024px) {
/*Tablets*/
	#site-navigation .inside-navigation {
    padding: 0 30px;
    box-sizing: border-box;
	}

}

@media (min-width:1120px) {
/*Desktop*/
	#site-navigation .inside-navigation {
    padding: 0 40px;
    box-sizing: border-box;
	}

}

I’m marking this as resolved. Thank you for your great support!

[Tom]

Awesome! Glad we could help 🙂

[Author]

Posts