Okay
  Public Ticket #958594
Menu on different screensizes
Closed

Comments

  •  2
    Melvin started the conversation
    November 17, 2016 at 1:42pm

    Hey!

    I figured out what i need to change to make the header nav go to mobile when it reaches 1280px. (i've changed a line in responsive.js and init.js) but between the desktop and mobile version the menu changes to a black bg color with the logo fullly shown. I just want it to change to the mobile version when the resolution is below 1280px. I've added a screenshot, but you can also look at the problem by going to the url.

    Thanks in advance!

  •  8,996
    Tahir replied
    November 17, 2016 at 1:48pm

    Hey Again,

    You are gonna have to edit two files see Screenshot 1:http://prntscr.com/a0ip1u and Screenshot 2: http://prntscr.com/83b9f2 .

    Update Note: Responsive.css code is actually now on line 2125

    Thanks

    ThemeNectar Support Team 

  •  2
    Melvin replied
    November 17, 2016 at 1:57pm

    Hey,

    I've already did that and it works, but my nav bar changes to a black background color with the full logo shown as i mentioned before. It should just change to the mobile version. (Added to screenshots)

    Thanks

  •  8,996
    Tahir replied
    November 17, 2016 at 2:15pm

    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) {
    body header#top #logo img,#header-outer[data-permanent-transparent="false"] #logo .dark-version {
        height:60px!important;
    }
    header#top .col.span_9 {
        min-height: 84px;
        line-height: 64px;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  8,996
    Tahir replied
    November 17, 2016 at 2:17pm

    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) and (min-width: 1001px) {
    html body #header-outer[data-transparent-header="true"].transparent {
        background-color: #fff!important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Melvin replied
    November 17, 2016 at 2:21pm

    Thanks! That did the trick. It still shows the full logo instead of the mobile logo (just the square). But for now that's fine. If there's an easy fix i would still like to hear it though ;) 

    Cheers!