[Resolved] Hamburger Menu hides in Mobile

Home Forums Support [Resolved] Hamburger Menu hides in Mobile

Home Forums Support Hamburger Menu hides in Mobile

  • This topic has 17 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1476396
    Sars

    HI Team,
    I have a small Issue,
    On reading one of the threads , I added this code in Custom CSS

    @media (min-width:768px) {
        .main-navigation .main-nav ul li.slideout-toggle a {
            background-color: #00aced;
        .main-navigation .main-nav ul li.slideout-toggle a:hover {
            background-color: #4843D2;
        }
    }
    

    But Unfortunately, I am facing 2 issues,
    1) The hamburger menu and the social icons disappears in mobile
    2) The hover background does not change even when I add the background color.

    Thank you

    #1476889
    Leo
    Staff
    Customer Support

    Hi there,

    1) Have you solved this? I’m seeing the menu toggle on mobile:
    https://www.screencast.com/t/1zOhEKZ37

    The code you’ve added should be unrelated to social icons so you will have to figure why it’s hidden on mobile.

    2) The first block of your CSS is missing a closing bracket }
    https://www.screencast.com/t/pI4L41p1h5lO

    #1478803
    Sars

    Hi Leo,
    Thanks a lot for your valuable time.

    The menu is showing, but on hover it disappears.
    I tried adding a background, the background is shown on desktop, but not on mobile.

    Thanks a lot for your time.

    #1478804
    Leo
    Staff
    Customer Support

    Your code above is wrapped in @media (min-width:768px) { so it’s desktop only.

    Does that help?

    #1478856
    Sars

    Thanks a lot @leo. I removed the media wrap. Still the background of the hamburger menu disappears on hover.

    VEry sorry to ask such basic questions.

    #1478917
    Leo
    Staff
    Customer Support

    Hmm give this CSS a shot:

    button.menu-toggle {
        background-color: #00aced;
    }
    #1478927
    Sars

    Thanks Leo,

    I added this:

    li.slideout-toggle a {
            background-color: #00aced;
        .main-navigation .main-nav ul li.slideout-toggle a:hover {
            background-color: #000;
        }
    			button.menu-toggle {
        background-color: #00aced;
    }

    Still the background disappears on mouse hover

    #1478932
    Leo
    Staff
    Customer Support

    You are missing a closing } for this block of CSS:

    li.slideout-toggle a {
            background-color: #00aced;

    Try this instead:

    .main-navigation .main-nav ul li.slideout-toggle a {
        background-color: #00aced;
    }
    .main-navigation .main-nav ul li.slideout-toggle a:hover {
        background-color: #000;
    }
    button.menu-toggle {
        background-color: #00aced !important;
    }
    #1478953
    Sars

    Thank you ,

    Now the code is:

    @media (min-width:769px) {
    .main-navigation .main-nav ul li.slideout-toggle a {
        background-color: #00aced;
    }
    .main-navigation .main-nav ul li.slideout-toggle a:hover {
        background-color: #000;
    }
    button.menu-toggle {
        background-color: #00aced;
    }
    }

    Unfortunately, Still the color is not changing.

    Thank you

    #1478960
    Leo
    Staff
    Customer Support
    #1478965
    Sars

    I have done as your advice Leo. Still no change ๐Ÿ™

    Thank You

    #1478967
    Leo
    Staff
    Customer Support
    #1478991
    Sars

    Tried the edited code Leo . But still on hover the hamburger icon becomes transparent ๐Ÿ™

    .main-navigation .main-nav ul li.slideout-toggle a {
        background-color: #00aced;
    }
    .main-navigation .main-nav ul li.slideout-toggle a:hover {
        background-color: #000;
    }
    button.menu-toggle {
        background-color: #00aced !important;
    }

    Thank You

    #1478998
    Leo
    Staff
    Customer Support
    #1479002
    Sars

    On Mobile, There is a fixed #00aced color Leo. On desktop, On Hover, the hamburger becomes transparent.

    I am trying this:
    Normal : #00aced color
    On hover -> some other color
    for both mobile and desktop.

    Thanks again for your time.

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