[Resolved] Main naviagtion breaking

Home Forums Support [Resolved] Main naviagtion breaking

Home Forums Support Main naviagtion breaking

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #355448
    Christopher

    http://dev-sc-17.info/services/electroplating/chrome/

    Hi there, when screen width is under 1250px the main nav breaks onto 2 lines. I have set content width to be max of 95% for screens under 1250px. I can’t workout the CSS to keep all the main link on one line before it breaks to nav burger. Can u please give me some help?

    #355493
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try adding this CSS?

    .site-logo {
        float: left;
    }
    #355516
    Christopher

    Nope didn’t work sorry.

    Ever since I added this css it is breaking the nav:


    @media
    (max-width: 1250px)
    body .grid-container {
    max-width: 95%!important;
    }

    so what is the best way to bring the content on mobile in from the screen edge and keep the nav from breaking before it triggers to nav burger?

    #355573
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    body .site.grid-container {
        max-width: 95%;
    }
    #355603
    Christopher

    Sorry that new selector doesn’t work just puts the content width back to 100%
    any other suggestions? I don’t understand way the width of the nav container(s) is so short and why can’t make the container wider with css?

    #355617
    Christopher

    just worked it out, I copied the specific CSS selector and added:


    @media
    (max-width: 1250px){
    #site-navigation > div:nth-child(1){
    max-width: 100%!important;
    }
    }

    #355791
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working 🙂

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