Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #230370

    We are experiencing an issue on our site in regards to the top navigation overlapping the logo on mobile devices (iPhone, iPad) and when a browser window is re-sized to be smaller than the width of the menu.

    It seems that the proper functionality is for the logo to be resized small, and the menu navigation links to drop below the logo. Instead, the logo is not resizing, and the menu navigation is flowing over the logo.

    We have began to experiment with other browsers, and have found this to occur mostly in Google Chrome.

    Any thoughts on how to fix this?


    Hi v2ginteractive!

    Please give us a link to the website. A screenshot of the issue will help.


    This reply has been marked as private.

    Your live demo of Enfold appears to function as loading the full menu and then recognizing that the menu extends too far to the left, so it then loads the mobile menu icon. Our sites are not doing that for some reason.



    Please update Enfold to the latest version 2.5.4. There have been improvements done to the header elements since the version you are using –



    Yigit, will this update compromise any of the customizations that we made? I can’t say for certain, as I am not the only developer of the site, but there may have been adjustments to the theme files using the WordPress Editor. There have definitely been several CSS changes made using the Quick CSS form in the Styling section of Enfold Theme Options.




    If you are not using a child theme ( ) changes you have made on theme files will be lost unfortunately, but styling changes in Quick CSS will remain as long as theme names are matching. If you have noted the changes you have made on theme files, i would recommend you to use a child theme and re-do the changes you have made




    I updated the theme to 2.5.4 using the Theme Update option within Enfold Theme Options. The problem of the responsive menu on iPad remains unchanged. The site appears exactly the same on iPad in terms of the header menu (see previous screenshots).

    Some of my current Enfold Theme Options settings are as follows:
    Header Type: Small Fixed Header
    Append search icon to main menu: Unchecked
    Responsive Header Main Menu: Display as Slide Out Menu
    Quick CSS:
    .main_menu ul:first-child > li > a {font-size:15px;}

    .title_container .breadcrumb {
    display: none !important;

    #js_sort_items .sort_by_cat a{
    font-size: 16px;

    h1.main-title.entry-title {

    .header_color .main_menu .menu ul li a:hover {
    background-color: #eae2db;

    .header_color .avia-menu-fx {
    background-color: #423222;
    .header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
    border-color: #423222;

    .alternate_color .avia-icon-list .iconlist_icon, .main_color .avia-icon-list .iconlist_icon { background-color: #423222; }

    #top #gform_4 input[type=”text”],
    #top #gform_5 input[type=”text”],
    #top #gform_6 input[type=”text”],
    #top #gform_7 input[type=”text”],
    #top #gform_9 input[type=”text”],
    #top #gform_10 input[type=”text”],
    #top #gform_11 input[type=”text”] {


    This reply has been marked as private.


    I used the tutorial and was able to fix my mobile menu issue. I also changed the code to be triggered by 6 or more menu items, rather than 7, because a few of our menu titles are long.




    Glad we could help Shawn, let us know if you have any other questions or issues


Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Menu Overlapping Navigation in Mobile Devices and When Window is Scaled Down’ is closed to new replies.