Okay
  Public Ticket #607655
Top navigation issue on smaller resolutions
Closed

Comments

  •  5
    Philipp started the conversation
    December 10, 2015 at 2:57pm

    Hi :-)

    After updating today, I just found a little issue with the \"top navigation\" while trying out different resolutions (see attached screenshot).

    There is a small area of resolutions, where the top navigation somehow jumps to a \"second line\" before automatically switching to the mobile menu. (tested on Chrome)

    In my case (guess it depends on the width and the amount of the menu items) it\'s between:

    Window Size (Width): 1266 x ... - 1303 x ...

    Viewport Size (Width): 1000 x ... - 1030 x ...

    So it\'s unfortunately exactly at some common resolutions (iPad or smaller laptops for example):

    1280x1024, 1280x800, 1024x768, ...

    Just wanted to let you guys know. Guess more people will have some issues about that :-)

    Maybe there is somehow a quick fix for future updates?

    Thanks again for your amazing work!

    All the best,
    Philipp

    Update: Also checked older versions of the theme: same issue. so at least it was not the recent update :)

  •  8,999
    Tahir replied
    December 10, 2015 at 9:44pm

    Hey ,
    For now you can change the width at which it switches to the mobile .
    You are gonna have to edit two files see Screenshot 1: http://prntscr.com/83b8uh and Screenshot 2: http://prntscr.com/83b9f2 .

    Thanks

    ThemeNectar Support Team 

  •  5
    Philipp replied
    December 11, 2015 at 2:04pm

    Works perfect :-)

    The only things that looks a little bit weird now, is that the logo is shrinking pretty strong and you can barely recognize it any more:

    http://prntscr.com/9cuor5

    Is there a chance to only shrink it to the size it does when you start scrolling down. Like as it\'s set at the header options of Salient: Header Logo Shrink Number (in px): 10

    Thank you very much! Really appreciate your efforts.

    Cheers, Philipp

  •  8,999
    Tahir replied
    December 13, 2015 at 8:05pm

    Hey Again,

    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: 1px) {
    body header#top #logo img, #header-outer[data-permanent-transparent=\"false\"] #logo .dark-version {
        height: 44px!important;
        margin-top: -14px!important;
    }
}

    Best.


    ThemeNectar Support Team 

  •  5
    Philipp replied
    December 14, 2015 at 12:02am

    That\'s it! Thanks Tahir :)

  •  2
    Rodrigo replied
    September 30, 2016 at 10:04pm

    I cant see the screeen in this coment

     "Hey , For now you can change the width at which it switches to the mobile . You are gonna have to edit two files see Screenshot 1: http://prntscr.com/83b8uh and Screenshot 2: http://prntscr.com/83b9f2 . Thanks"

    I am having the same issue that Philipp and i would like to change the size of text in the header if the width is 1024 px.

    Thanks

  •  8,999
    Tahir replied
    October 1, 2016 at 2:28pm

    Hey Rodrigo,

    Could you provide your site url so that i may write up the custom css needed.  Also please create a New Private Ticket . 

    Thanks 

    ThemeNectar Support Team 

  •  1
    Ursula replied
    February 20, 2017 at 5:57pm

    Hi,

    I want to the same like philipp to eliminate the menu laying over the logo (http://neu.hausundso.de/) 

    somehow it does not work, I followed the instruction of the screenshots (changes in js/init.js and css/responsive.css)

    Why doesn't it work, do you have a hint?

    Regards

    Ursula

  •  8,999
    Tahir replied
    February 20, 2017 at 6:35pm

    @Ursula,

    Seems to be working on my end . 

    Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ where applicable.

    Best.

    ThemeNectar Support Team