Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 29, 2018 at 6:04 pm #1003229
    Monique

    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

    August 30, 2018 at 3:44 pm #1003684
    Dude

    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

    August 31, 2018 at 11:35 am #1004029
    Monique

    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

    August 31, 2018 at 3:52 pm #1004134
    Victoria

    Hi Monique,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 8, 2018 at 11:44 am #1018937
    Monique

    Ok.

    Can you flag this topic as solved please?

    Best regards,
    Monique

    October 16, 2018 at 10:43 am #1022095
    Monique

    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

    October 17, 2018 at 3:58 am #1022499
    Rikard

    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

  • Author
    Posts
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.