Okay
  Public Ticket #914247
Menu Overlapping Logo
Closed

Comments

  •  2
    Greg Goodman started the conversation
    October 7, 2016 at 8:13am

    I have a large logo, which is what the client likes. However, on smaller screens, the menu items overlap the logo before the responsive hamburger menu kicks in.

    What css do I need to make this not happen?

    Thanks!

  •  8,996
    Tahir replied
    October 7, 2016 at 2:41pm

    Hey Greg,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1110px) {
    #header-outer #logo img {
        height: 75px !important;
        margin-top: 21px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Greg Goodman replied
    October 7, 2016 at 8:58pm

    Thanks for that code. It works with full width header, but when I switch it off and make it not full width, it still doesn't work. 

    What is the css for the standard width header?

    Thanks.

  •  8,996
    Tahir replied
    October 10, 2016 at 3:13pm

    Hey Again,

    Sorry for the Weekend delay . For non fullwidth simply adjust the values .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1110px) {
    #header-outer #logo img {
        height: 49px !important;
        margin-top: 26px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Greg Goodman replied
    October 12, 2016 at 7:47am

    This is closer, but there is still a little overlap ... you can see the page in action at http://77.104.154.92/~santac42/home-test/

    Screenshot attached of how much overlaps just before it goes to the smaller icon.

  •  8,996
    Tahir replied
    October 13, 2016 at 5:07pm

    Hey Again,

    Simply adjust the max-width .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1280px) {
    #header-outer #logo img {
        height: 49px !important;
        margin-top: 26px !important;
    }
}

    Thanks

    ThemeNectar Support Team