[Support request] How to display menu icon in mobile as button

Home Forums Support How to display menu icon in mobile as button

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
  • #1431414

    I just wished if the mobile menu icon looked something like copyblogger.com

    Is it possible to achieve that? Because right now that mobile icon looks too simple and hardly grabs any attention.

    Customer Support

    Hi Shami,

    You can start by trying to replicate the font style looks through WP Admin > Appearance > Customize.

    For font color:
    go to Color > Primary Navigation.

    For layout:
    go to Layout > Primary Navigation.

    For typography:
    go to Typography > Primary Navigation.

    For other styles that can’t be achieved through this, you can use WP Admin > Appearance > Customize > Additional CSS.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"


    I don’t really want to replicate it. That was for reference. I want to make the icon look like button in mobile. I guess it can’t be achieved with the current available options in the Customize.
    It’ll probably require additional css.


    It should stand out like a button.

    Customer Support

    Hi there,

    try this CSS:

    #mobile-header .menu-toggle {
        line-height: 45px;
        border: 2px solid #000; /* Change #000 for border color */
        border-radius: 45px;
        margin-right: 0.8em;
        background-color: #f00; /* Change #f00 for background */
        color: #fff; /* Set text and toggle color to white */

    That looks good. It just has padding issue. Even after doing changes in the layout settings, the padding just won’t work. The border touches the edge of the screen on the right. How do I fix it?

    The only CSS I used earlier was:

    (min-width:769px) {
    .site-branding {
    display: inline-block;

    .site-logo {
    float: left;
    margin-right: 20px;
    margin-left: 10px;

    I used this css to make the logo and the menu in a single line.

    Customer Support

    I updated the CSS here to include some margin-right


    That worked. Thanks a lot. I want to add divider lines between each menu item in mobile. Is it possible?


    Also, I just observed another problem. When I try to increase the font size of primary navigation in mobile, the menu icon stacks below the site title due to responsiveness. Any fix?
    Please note that this only happens when the site title font-size is increased. I decreased that a little and this issue is fixed.

    So now I just have to add the lines between mobile items to separate them as it looks so plain in design.

    Customer Support

    The only fix to stop things from wrapping to a new line, without removing padding, is to reduce the font size – like you did for the Site Title – you can do the same for the Primary navigation.

    Try this CSS:

    #mobile-header li {
        border-bottom: 1px solid #000;

    Looking good. I just have to add margin from both sides. As the border is from edge to edge.


    I added this:
    margin-right: 35px;
    margin-left: 35px;

    It’s looking good now.

    The last part: How to fill the menu box with color? I mean inside the border of menu icon only. Plus I want to make the ‘menu’ color white and surround it with a dark solid color.

    Customer Support

    Thanks David. One last thing, I want to do the same border thing for sub menu toggle. I really appreciate your awesome support.

    Customer Support

    Try this CSS:

    #mobile-header  .menu-item-has-children .dropdown-menu-toggle {
        border: 1px solid #000;
        background-color: #f00;
        color: #fff;
        border-radius: 50px;
        line-height: 50px;
        width: 50px;
        padding: 0;
        text-align: center;
        margin-right: 10px;
    #mobile-header .main-nav > ul > li.menu-item-has-children>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.