Menu Plus

[Amandine]

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!

[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;
}

[Amandine]

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!

[Tom]

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;
    }
}

[Amandine]

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!

[Tom]

Any chance you can link me to your site with #2 added into your CSS?

[Amandine]

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?

[Tom]

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?

[richpags]

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

[richpags]

Edit: The bellow CSS seemed to do the trick.

@media (max-width: 768px) {
.main-navigation .main-nav ul li a {
line-height: 60px;
}
}

Richie

[Tom]

Glad you found a solution – thanks for posting it 🙂

[Author]

Posts