Home Forums Support Menu Plus

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #197615
    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!

    #197682
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #197689
    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!

    #197727
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #197881
    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!

    #198017
    Tom
    Lead Developer
    Lead Developer

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

    #198117
    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?

    #198197
    Tom
    Lead Developer
    Lead Developer

    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?

    #221975
    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

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #222011
    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

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #222030
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution – thanks for posting it 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.