Hamburger menu css hover not working correctly

I just need to show black color as the background color in my hamburger menu. But there is a problem. This hamburger menu using CSS :after and :before classes. If I hover over them, it will hover one by one which is not I want. I want all 3 lines in the menu to be hover in black. like this.

I tried this way but it will show one by one.

.BurgerMenu:hover:after,
.BurgerMenu:hover,
.BurgerMenu:hover:before{
    background: #000;
}

.BurgerMenu {
    position: relative;
    left: 6px;
    top: 26px;
    height: 2px;
    width: 25px;
    background: #979797;
}

.BurgerMenu:before {
    transition: all 0.25s;
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    height: 2px;
    width: 25px;
    background: #979797;
}
.BurgerMenu:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0.5em;
    height: 2px;
    width: 25px;
    background: #979797;
    transition: all 0.25s;
}

.BurgerMenu:hover:after,
.BurgerMenu:hover,
.BurgerMenu:hover:before{
	background: #000;
}
<nav id="nav-storage" class="Navigation">
  <section class="Navigation--collapsed">
    <div class="BurgerMenu"></div>
  </section>
</nav>

background and border can do this easily without pseudo element:

.BurgerMenu {
  position: relative;
  left: 6px;
  top: 26px;
  height: calc(6px + 1em);
  color: #979797;
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding: 0.5em 0;
  box-sizing: border-box;
  width: 25px;
  background: currentcolor content-box;
  transition: all 0.25s;
}

.BurgerMenu:hover {
  color: #000;
}
<nav id="nav-storage" class="Navigation">
  <section class="Navigation--collapsed">
    <div class="BurgerMenu"></div>
  </section>
</nav>

burger menu css Code Example, E/ViewRootImpl: sendUserActionEvent() mView returned. ease animation in css � edge media query � edge ontouchmove does not work correctly� Re: Change Hamburger Menu Image in CSS Adding to a Pages's header code (instead of on the Settings tab) will work exactly the same way, except it will only apply to that particular page instead of all pages of the site.

The most optimal way to achieve this would be using separate <div>s instead of trying to create the icon using :after and :before. Then you end up with a much more readable CSS.

.BurgerMenu {
    position: relative;
    width: 25px;
    padding: 10px;
}

.BurgerMenuRow {
    margin-top: 6px;
    margin-bottom: 6px;
    width: 25px;
    height: 2px;
    background: #979797;
    transition: all 0.25s;
}

.BurgerMenu:hover .BurgerMenuRow {
    background: #000;
}
<nav id="nav-storage" class="Navigation">
    <section class="Navigation--collapsed">
        <div class="BurgerMenu">
            <div class="BurgerMenuRow"></div>
            <div class="BurgerMenuRow"></div>
            <div class="BurgerMenuRow"></div>
        </div>
    </section>
</nav>

Z-index not working on menu, i'm lost!!!, I've managed to create the menu to my likings but unfortunately there is just that one box-sizing: border-box; z-index: 999; } ul.menu li a:hover { color: red; background: Ok lets say FF and IE have the z-index rules correct. The above “normal” CSS will display a horizontal menu on big screens. But on the smaller screens, we will need to break the menu down into a vertical one due to screen size constraints, and use the hamburger button to toggle show/hide the menu: As usual, we will use the @media media query to apply a different style for small screens.

CSS Hover Menu not working on iOS, Built a simple CSS dropdown menu but it doesn't toggle well on iOS and I am having trouble finding a solution, any ideas? HTML: This hamburger menu CSS button is a quite simple button. But nonetheless, it can be quite efficient and useful for your website as well. It has a very smooth and basic animation as well. When you hover the mouse pointer over the hamburger menu CSS animated button, the button is quickly and smoothly transformed into a cross sign.

A litte JS used, remove your css for hovers and this mouseover method helps in appending the style. check the code here.

HTML

<nav id="nav-storage" class="Navigation">

              <section id="sec" class="Navigation--collapsed">
                <div id="bm" class="BurgerMenu"></div>
              </section>
            </nav>

JS

let target = document.getElementById("sec");
var styleElem = document.head.appendChild(document.createElement("style"));

target.onmouseover = function(){
styleElem.innerHTML = "#bm,#bm:after,#bm:before {background: #000;}";
};

target.onmouseout = function(){
styleElem.innerHTML = "#bm,#bm:after,#bm:before {background: #979797;}";
};

https://jsfiddle.net/ckd940tm/2/

I didn't removed your :after and :before Try this, and let me know in the comments.

CSS OffCanvas menu not working properly, CSS OffCanvas menu not working properly When the screen is <= 768px, the navbar dissappears and the mobile menu hamburger button appears. 2rem; font-size: 0.7rem; } .navigation li:hover { background-color: #222; }� Hamburger Menu Animation CSS. This hamburger menu design has a small hover effect. The hover animation effect moves like a ripple or an equalizer. It is simple and good for tech and finance sites. It is greatly designed by Derek Morash. Check out the demo using the links below.

How To Create a Mega Menu, class="dropdown"> element around the button and the container element (<div class="dropdown-content"> to position the dropdown menu correctly with CSS. A fully responsive, CSS-only navigation that breaks down into a hamburger dropdown menu when the viewport size is smaller than a breakpoint specified in the CSS3 media queries. How to use it: Create the HTML for the hamburger menu toggle.

Troubleshooting – Max Mega Menu, Sometimes we need to manually intervene with your theme to stop it conflicting with Max Mega Menu to get things working properly. Here are some articles to� Download the PDF front-end roadmap for FREE to keep you on track! https://codestackr.podia.com/front-end-web-developer-roadmap-2020 In this video, I'll show

Fix sidenav on large screens not working, toggle button to see the menu, but even then shows as a hover menu and not fixed). style.css. @media only screen and (min-width: 1025px){ //wanted it to show for to the bottom of the page, and the sidenav does not look to be correctly loading. The top menu was pushed down, and the side menu was not loading. Preview: Description: A plain HTML/CSS sliding navigation that expands the hamburger icon into a sidebar menu when toggled. How to use it: Create the hamburger menu and insert it together with the checkbox based menu trigger into a container.

Comments
  • I can't change :after :before because it's having lot of animations.
  • @Janath What kind of animations? The only animation in your original post is the transition.
  • This is just a simple example. I have a very complex one by my own.
  • I'm pretty sure you will be able to use separate <div>s for that, just use selectors like :nth-child() instead of :before and :after.