Archived topic
Clear Mobile Menu
8 replies · Started by pairfum on July 15, 2021
Dear Support,
We have set up a desktop mega menu and for tablet and mobile we have an Off-Canvas menu.
You can see it here:
https://www.pairfum.com
We are very pleased with this set-up and find that it works really well.
We have noticed, however, that when a site visitor opens the Off Canvas menu on mobile & tablet, the distinction between the top level, the 1st and 2nd drop down levels is not very clear.
Would you have any suggestions how we could improve this?
We see that we can change the colour of the 1st drop down level via the Customizer but we don't seem to be able to give the 2nd drop down level a unique colour. Would this be feasible?
All suggestions are very welcome.
Many thanks for your help with this.
Kind regards,
Pairfum London
Hi there,
Have you tried playing around with the colors of submenu on Appearance > Customize > Colors > Primary Navigation as shown here - https://share.getcloudapp.com/mXurX5Dp
Consider adding contrasting colors between the submenu and its parent menu. :D
Hi Elvin,
Many thanks for the tip.
I haven't as yet but I noticed that I can only do this on the first 1 level. The 2nd level will take the colour of the 1st level.
In other words, unless I can change the colours also on the 2nd level, I fear the effect will be marginal.
Would you have a CSS snippet that I could use to change the colours on the 2nd level? If so, then this would work really well.
The CSS snippet should change:
- the text colour
- the background colour, and
- the colour or style (underline) of the active or hover item
If so, then this could work really well.
Kind regards,
Pairfum London
Hi Elvin,
We have changed the colour of the 1st submenu when it is toggled open.
However, we can't figure out how to add a border to the 2nd submenus when they are toggled open.
We are thinking about a CSS snippet along these lines:
/* GeneratePress - Off-Canvas Menu for Mobile - Add border to 2nd sublevel menu */
.menu-item-38182.sub-menu.toggled-on {
border: 1px solid #3e3e3e;
}
This doesn't seem to work though.
Can you advise how we would need to adjust this snippet?
Kind regards,
Pairfum London
Hi there,
try the following:
/* Style 2nd level sub menu - background and border */
#generate-slideout-menu.main-navigation .main-nav ul ul ul {
background-color: #f00;
border: 2px solid #000;
}
/* Optional Style links within 2nd level sub menu */
#generate-slideout-menu.main-navigation .main-nav ul ul ul li a {
color: #fff;
}Hi David,
Many thanks for the CSS snippet.
Your reply overlapped with me finding that the following code works:
/* GeneratePress - Off-Canvas Menu for Mobile & Tablet */
/* Add border to 2nd sublevel menu */
.menu-item-38182 .sub-menu.toggled-on,
.menu-item-37221 .sub-menu.toggled-on,
.menu-item-37233 .sub-menu.toggled-on,
.menu-item-40145 .sub-menu.toggled-on,
.menu-item-40146 .sub-menu.toggled-on,
.menu-item-40147 .sub-menu.toggled-on {
border: 1px solid #3e3e3e;
background-color: #f9f9f9;
}
It is now live on our site and works really well: https://www.pairfum.com
I will try out your snippet.
Kind regards,
Pairfum London
Glad to hear you have something working :)
Hi David,
We have just tried your code and it works very well.
It is much simpler and cleaner!
We will place it on our live site.
Thank you for this tip.
Kind regards,
Pairfum London
Glad to hear that!
