Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 2, 2016 at 4:54 pm #607002
    htm2112

    Can you provide me some assistance in resolving the issue where the main navigation overlaps the logo? Please take a look at http://www.hoverprotech.com and make the browser smaller. You will see the navigation overlap the logo. Or, have a look at it on an iPad.

    I have tried changing a variety of css, but cannot get it to work without making my logo much smaller using the media queries. Can you find a way to make the logo responsive in the smaller browser width so that it will shrink when the navigation element begins to hit it?

    April 2, 2016 at 11:33 pm #607073
    begrafiks

    Hi @htm2112 ;
    have you tried to change the “Header Mobile Menu activation” ;
    Dashboard > Theme settings > Header > Header Mobile Menu activation >> and chose the size at which you would like to activate the “Mobil Menu”,
    in case you have set it to 990px I think you should enlarge the width of the “container” which is set to 90%, thus you have not eneough space to wiev all the elements.

    April 3, 2016 at 12:42 am #607082
    htm2112

    I would rather not have the mobile menu activated for tablets. So, in that case, I need to make the logo smaller for the tablet size or shrink a bit. Can you suggest something else, so that I don’t have to use the mobile menu for tablet size?

    April 3, 2016 at 10:12 am #607192
    Rikard

    Hi,

    There is just not enough room in the header for everything to fit unless you make you logo and menu items a lot smaller. If you want to activate the mobile menu for tablets and down you can use the following in Quick CSS:

    @media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

    Regards,
    Rikard

    April 3, 2016 at 2:32 pm #607228
    begrafiks

    Hi @htm2112 ;
    Please, try with these lines too.

    On my end it seems working :
    Menu stays besides of the LOGO without touching it.

    /*REDUCE THE PADDING OF THE CONTAINER*/
.container {  padding: 0px 35px !important;}

/*REDUCE THE PADDING+MARGIN RIGHT OF THE MAIN MENU*/
.avia-menu.av_menu_icon_beside{padding-right !important: 10px;margin-right: 10px !important;}

/*REDUCE THE PADDING OF THE MAIN MENU LINKS*/
.av-main-nav > li > a {padding: 0 5px !important;}

/*REDUCE THE PADDING OF THE MAIN MENU LINK TEXTS*/
.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text{padding-left: 7px !important;padding-right: 10px !important;} 
.
    April 3, 2016 at 3:01 pm #607232
    htm2112

    Thanks so much for the help!

    April 3, 2016 at 3:17 pm #607236
    Basilis

    Hey!

    Glad you got it solved.
    Please do let us know if we can do anything else for you, we would appreciate it a lot.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Main nav overlaps logo when browser is made smaller’ is closed to new replies.