Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 9, 2013 at 9:54 am #29293
    marketingwebaustralia

    Hi,

    I’m building a site for a client, which is currently at http://www.choicesflooringwodonga.com.au/site/

    Enjoying working with this theme, but I have a problem with the top header and menu.

    Basically on some browsers and some window sizes, the menu is going over the top of the logo.

    – I have added in a logo that’s 478 x 78px (including a store location and phone number, but all one image).

    – On Windows 7 with Chrome, Firefox, IE 10 and Opera it looks fine at large screen size, but messes up if the window size is reduced.

    – On Windows XP with IE8 the menu is over the top of the logo even at large screen size.

    I’m sure it has something to do with the fact I’ve put in a bigger logo and haven’t told the responsiveness when to kick in to go the smaller menu format, but I don’t know how to fix it.

    I ideally would like a solution that isn’t going to break every time I update the theme.

    Thanks in Advance

    Matt

    September 9, 2013 at 7:45 pm #140277
    Yigit

    Hi Matt,

    You can add this code to Quick CSS that is in Enfold theme options under Styling

    @media only screen and (min-width: 1140px) { .main_menu ul:first-child > li > a { padding: 0 5px!important; } }

    It will decrease padding to 5px on menu anchor tags on screens smaller than 1140px. Then you can change the switch width of mobile menu. To do so, in your WordPress themes folder, please go to Enfold > Js and open Avia.js file and find following code in line 87

    switchWidth = 767;

    and change it to

    switchWidth = 989;

    Then some CSS codes may be needed, but it would be better if you apply those now then we inspect live on your website

    Regards,

    Yigit

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Header & Top Menu Overlap’ is closed to new replies.