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

    Hi there,

    On b.m. website (almost ready to go) we set the mobile menu for smartphones and tablet (browser width till 990 px. In the menu there is a mega menu for menu item “Hond adopteren”.

    When the mobile menu is used (so below 990 px), the column title of the mega menu looks exactly the same as the real menu and sub menu items. I believe this is confusing, since visitors might think these are clickable menu items which in fact they are not. I checked with your own default demo and it is the same.

    I think a solution can be to hide the mega menu column titles only when the mobile menu is used, so till 990 px. I know I should use something with @media screen and (max-width: 989px), but I am not sure what exactly I should hide…

    Can you help me with this please? Thanks in advance!

    Best regards,
    Monique

    #1003684

    Hey Monique,

    Unfortunately it’s not possible to remove these items without a complete rewrite of the mobile menu function (which we can’t provide). You could however set a different color value for the non-clickable items (to mark them as non-clickable) with this code

    
    @media screen and (max-width: 989px){
    li.av-width-submenu > a .avia-menu-text {
        color: #000;
    }
    }
    

    – replace #000 with your custom color value.

    Best regards,
    Dude

    #1004029

    Hey Dude,

    Ok I understand for now, although I believe that Enfold should style this type of menu the same for large screens and smaller screens. Maybe an improvement for future?

    Thanks for giving me a starting point to style the column title different. I had to add ul.sub-menu otherwise all menu items had that darker color. Also I needed some tweaks to get rid of the avia-bullet and the cursor otherwise it still looked like a clickable menu item. So in the end the final code is:

    @media screen and (max-width: 989px){
    ul.sub-menu > li.av-width-submenu > a .avia-bullet:before {
    	display: none;
    }
    
    ul.sub-menu > li.av-width-submenu > a {
        padding-left:90px !important;
    }
    
    ul.sub-menu > li.av-width-submenu > a .avia-menu-text {
        color: #000;
    	cursor: none;
    }
    }

    You may flag this topic as solved.

    Best regards,
    Monique

    #1004134

    Hi Monique,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1018937

    Ok.

    Can you flag this topic as solved please?

    Best regards,
    Monique

    #1022095

    Hi there,

    I can see that Victoria ‘visited’ this topic, but didn’t flag it as solved. To clean up my pending topics list: can you please flag this topic as solved? I cannot do it myself I believe?

    Thanks & regards,
    Monique

    #1022499

    Hi Monique,

    Thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

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

The topic ‘Hide mega menu column title when mobile menu is used’ is closed to new replies.