Archived topic
Menu Plus
10 replies · Started by Amandine on May 29, 2016
Hi Tom, first of all, than you for making this great Wordpress theme and dedicating your time to answer our questions! Much appreciated.
I have a few questions regarding the mobile menu:
- How can I change the mobile menu item height without changing the primary menu item height? Under "customize", the "primary menu items" are currently set to 65px, which I would like to keep for the normal navigation, but for the mobile menu, I’d like to decrease this height. I’ve already tried this CSS, but it doesn’t work:
@media (max-width: 768px) {
.main-navigation .main-nav ul li a {
line-height: 20px;
}
}
- Also, is there a way to add a separator-line between the different mobile menu items?
- Lastly, is it possible to make the menu plus icon a bit bigger (not the mobile menu logo but the icon itself). It is rather small right now and I’d like it to appear larger.
I am working locally so unfortunately I can’t link you to the site. I hope that what I’ve stated above makes sense.
Thank you Tom!
Hi there,
1. Which sticky effect are you using? Fade, slide or none?
2. Are you using the slideout mobile menu or the regular mobile menu?
3. This CSS should do it:
.menu-toggle:before {
font-size: 20px;
}Thank you for the very speedy reply! Number 3 worked like a charm.
1. I am using the fade sticky effect.
2. I am using the regular mobile menu.
Thanks again!
2. Try this:
.main-navigation.navigation-clone .main-nav ul li a {
line-height: 40px;
}
.main-navigation .sticky-logo, .main-navigation .sticky-logo img {
height: 20px;
}3. This should do it:
@media (max-width: 768px) {
.main-navigation.toggled li a {
border-bottom: 1px solid #FFFFFF;
}
}Thanks for the reply Tom! Number 3 worked perfectly. Number 2 unfortunately didn't work, the menu items height doesn't change. It stays at 65px. Can you think of anything else or what it might be that's causing the problem?
Thank you!
Any chance you can link me to your site with #2 added into your CSS?
This is unfortunately not possible because I'm running the site locally. Would it maybe help if I sent you some snippets of the code? Or my custom CSS specifically?
Hmm, ideally I would have to see the website so I could inspect the element to see why the CSS isn't being read. It may be getting overwritten by a different piece of CSS.
Any chance you can put it on a live server?
Hey all,
What do you guys think of my slide out menu size when viewed on a mobile?
Think the text is to small?
I'd be nice to get it similar to GeneratePress site's menu.
Cheers
Richie
https://reelmovieposters.com.au
Edit: The bellow CSS seemed to do the trick.
@media (max-width: 768px) {
.main-navigation .main-nav ul li a {
line-height: 60px;
}
}
Richie
Glad you found a solution - thanks for posting it :)
