[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
    Posts
  • #1431414
    Shami

    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.

    #1431447
    Elvin
    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.

    #1431455
    Shami

    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.

    #1431456
    Shami

    It should stand out like a button.

    #1431681
    David
    Staff
    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 */
    }
    #1431816
    Shami

    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:

    @media
    (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.

    #1431840
    David
    Staff
    Customer Support

    I updated the CSS here to include some margin-right

    #1431854
    Shami

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

    #1431861
    Shami

    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.

    #1432033
    David
    Staff
    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;
    }
    #1432036
    Shami

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

    #1432037
    Shami

    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.

    #1432065
    David
    Staff
    Customer Support
    #1432072
    Shami

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

    #1432080
    David
    Staff
    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.