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

    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?

    #607073

    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.

    #607082

    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?

    #607192

    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

    #607228

    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;} 
    .
    #607232

    Thanks so much for the help!

    #607236

    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

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.