Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Adjusting the Navigation Container area

Home Forums Support Adjusting the Navigation Container area

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

    GP Premium 1.5.6
    #477484
    Leo
    Staff
    Customer Support

    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.

    #477534
    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!

    #477611
    Leo
    Staff
    Customer Support

    Can you try the edited code?

    #477612
    Benjamin

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

    iMac still works though!

    #478551
    Tom
    Lead Developer
    Lead Developer

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

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

    #479069
    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!

    #479907
    Tom
    Lead Developer
    Lead Developer

    I wonder if this would work better:

    #site-navigation .inside-navigation {
        padding: 0 40px;
        box-sizing: border-box;
    }
    #479966
    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!

    #480075
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad we could help 🙂

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