How to show menu items permanently on mobile?

  • Author
    Posts
  • #155973

    kenielts
    Member

    Hi again,

    I’ve tried to custom the mobile menu and have come with a quite pleasurable display. There are just a few things remaining I would like to ask you for help.

    Firstly, How can I show the menu items permanently? What I mean is I don’t need to touch/tap on the menu for the menu items to appear.

    And secondly, when tapping on the menu, logo, or links I see a pale blue color appear and disappear quickly (not the hover or copy effect). How can I turn it off?

    Thanks,
    Ken

    The blog I need help with is theieltshouse.com.

    #156021

    binarymoon
    Theme Author

    To force the menu to always display, and hide the menu toggle button you can use:

    .menu-primary .menu ul {
        display: block !important;
    }
    
    .menu-toggle {
        display: none !important;
    }

    However, on mobile they cover the date so you might want to align them to the right, or hide the date?

    Hide date:

    .masthead .postmetadata {
        display: none;
    }

    Align right:

    .menu-primary .menu ul {
        text-align:right
    }

    The blue box that flashes when you tap things – is a thing that happens on mobile. I had to Google how to do this since I’ve never changed it before. The following seems to work:

    header.masthead {
        -webkit-tap-highlight-color: transparent;
    }

    Cheers – Ben

    #156070

    kenielts
    Member

    Those codes helped me think of many ways to modify the menu’s behaviors.

    Thanks

    #156077

    kenielts
    Member

    Unfortunately, the code below doesn’t have an effect on the color. I pasted it to my CSS, but it turned red, which might mean it wasn’t suitable for the theme.

    header.masthead {
        -webkit-tap-highlight-color: transparent;
    }

    There might be a trick for that, but if it cannot be removed, I feel perfectly fine.

    Thanks for spending time on the issue.

    #156112

    binarymoon
    Theme Author

    Oh – the problem is that WordPress.com limits the css you can add to the customizer. This is to prevent people from doing anything insecure (essentially to stop hacking). They have to manually add support for every CSS property so less common/ new ones don’t get added. It looks like this is one of those – so I think it’s going to have to stay.

    Ben

    #156119

    kenielts
    Member

    Got it. Thank you.

The topic ‘How to show menu items permanently on mobile?’ is closed to new replies.