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: (visible only to logged in users)

    #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
    Original poster

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

    Thanks

    #156077
    kenielts
    Member
    Original poster

    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
    Original poster

    Got it. Thank you.

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