[Resolved] Mobile menu not visible

Home Forums Support [Resolved] Mobile menu not visible

Home Forums Support Mobile menu not visible

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #310674
    Erik

    My mobile menu is not visible, what do i wrong?

    #310679
    Leo
    Staff
    Customer Support

    Hi Erik,

    Can you provide a link to your site? Thanks!

    You can also try #1 on this page: https://docs.generatepress.com/article/debugging-tips/

    #310769
    Erik
    #310773
    Leo
    Staff
    Customer Support

    The menu toggle is there. It’s just white.

    Any reason why you choose to use background image in menu of blue instead of using the color add-ons?

    Usually the mobile menu have the color main navigation but they are currently all white right now.

    Let me know.

    #310774
    Erik

    Thanks, i was not clear. Yes, because i’ll use tabs as menu items with round corners. I think that’s not possible with the normal function?

    #310784
    Leo
    Staff
    Customer Support

    ok try setting background color back to white like you had it before, then add this CSS to change the menu toggle color:

    .menu-toggle {
        color: #000000;
    }

    Let me know if this works for you.

    #310787
    Erik

    Thanks, it’s better but not yet perfect. On the mobile menu i’ll show a blue backgroundcolour and no tabs with round corners.

    #310788
    Leo
    Staff
    Customer Support

    Ok remove the code I provided above and try this instead:

    @media (max-width: 768px) {
        .main-navigation {
            background-color: #1e72bd;
            border-radius: 5px
        }
    }
    #310794
    Erik

    Thanks, i used this


    @media
    (max-width: 768px) {
    .main-navigation {
    background-color: #124295;
    }
    }

    but the hover still has a border-radius

    #310796
    Leo
    Staff
    Customer Support

    Try wrapping this code you’ve added:

    .main-navigation .main-nav > ul > li > a {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin-right: 3px;
    }

    like this as well:

    @media (max-width: 768px) {
        .main-navigation .main-nav > ul > li > a {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 3px;
        }
    }
    #310920
    Erik

    When i use


    @media
    (max-width: 768px) {
    .main-navigation .main-nav > ul > li > a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 3px;
    }
    }

    instead

    .main-navigation .main-nav > ul > li > a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 3px;
    }

    the tabs are disappeared

    #311025
    Tom
    Lead Developer
    Lead Developer

    I think Leo meant to write it like this:

    @media (min-width: 769px) {
        .main-navigation .main-nav > ul > li > a {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 3px;
        }
    }
    #311068
    Leo
    Staff
    Customer Support

    Ahh right thanks Tom ๐Ÿ™‚

    #311483
    Erik

    Great! Thanks Leo and Tom.

    #311582
    Tom
    Lead Developer
    Lead Developer

    No problem! ๐Ÿ™‚

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