Issues with Hamburger menu hover effect in CSS

I am trying to set the background color of my hamburger menu to black. However, I am facing an issue with the CSS :after and :before classes. When I hover over them, they change color one by one instead of all three lines changing together. How can I make all 3 lines in the menu hover in black simultaneously?

https://i.sstatic.net/hwash.png

I attempted the following solution, but it only changes the color 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>

Check out the JSFiddle here

htmlcss

Answer №1

To achieve this in the most effective way, it is recommended to use separate <div> elements instead of attempting to generate the icon using :after and :before pseudo-elements. This approach results in cleaner and more understandable CSS code.

.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>

Answer №2

You can achieve the desired effect with background and border properties without using a 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>

Here is an optimized version based on your initial code:

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

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

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

Answer №3

  • To achieve the desired layout, it is recommended to use 3 elements with the same class of BurgerMenu and apply the style margin: 5px; directly instead of relying on using the pseudo-elements :before and :after.

  • In addition, consider applying the hover effect to the parent element when hovering instead of targeting the individual BurgerMenu element.

.BurgerMenu {
    height: 3px;
    width: 25px;
    margin: 5px;
    background: #979797;
}


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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement iscroll4 in an iPad2 using CSS?

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> ...

cssipadiscroll4

What is the best method to choose the initial offspring of the primary brother or sister within a list item?

Is there a way to specifically target the nested li elements in my css selector? Check out the Demo li:first-child { background-color: rgb(236, 236, 236); list-style-type: none; margin-bottom: 3px; padding: 8px; } <ul> <li& ...

csssiblings

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

javascripthtmlcss

Hiding the button until either hovering over the div or entering text into the input field

I'm looking to create the following structure: <div class-name="search"> <input class-name="input"/> <button class-name="searchbutton> search </button> </div> However, I would like the button to initially be hidden. ...

htmlcss

Can you restrict the selection of text to only the current element?

<div class="container"> <div class="item1">text text text in div element 1</div> <div class="item2">text text text in div element 2</div> </div> Is there a way using HTML nodes, CSS, or JavaScript to restrict the select ...

javascripthtmlcss

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

What is the method to deactivate child elements within an element that possesses the disabled attribute in Polymer?

What are some effective methods for disabling children elements when at least one parent element is disabled? I have a form with nested groups and fields that can be disabled based on certain conditions. Different parent elements may be disabled independe ...

htmlpolymerdisabled-inputrecursive-datastructures

What could be causing the discrepancy in results between the first and second methods?

Implementing Weather Icons: const getWeatherIcon = (iconParameter) => { const icon = `https://openweathermap.org/img/wn/${iconParameter}@2x.png` return <img src={icon} alt={iconParameter} /> } <div className="weathericon"> ...

javascripthtmlreactjs

My webpage is struggling to locate the CSS stylesheet

Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...

htmlcss

Responsive HTML table with full width of 100%

I am attempting to make an HTML table responsive by setting the two td elements to occupy 100% width on smaller screens. This is what I have so far... .test1{ background:teal; text-align:center; padding:20px; } .test2 { background:tan; paddin ...

htmlcsshtml-table

Difficulty integrating custom CSS with Bootstrap framework

I attempted to incorporate a custom CSS file with my Bootstrap code, but unfortunately it does not seem to be functioning properly. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcssbootstrap-5

JQuery: Techniques for accessing the assigned font of an element

Can the assigned font of an element be retrieved using jQuery? For example, if there is this CSS: #element { font-family: blahblah,Arial; } In the above case, the Arial font will be assigned to #element. Is it possible to extract that information using ...

javascriptjquerycssfonts

Disable the justification of Angular UI Tabs on mobile devices

When using the Angular UI Tabs component with the attribute justified="true", everything works fine on desktop. However, I am facing an issue when the resolution changes for tablets and phones, as I want to change justified to false. I prefer not to rely ...

cssangularjstwitter-bootstraptabsangular-ui

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

I've implemented a code snippet for lazy loading images with different URLs: <img src="https://source.unsplash.com/1600x900/?hotel,booking.com?v=1" loading="lazy" /> <img src="https://source.unsplash.com/1600x900/?hot ...

htmlvue.js

The h1 tag text is spilling out of the div container

I'm facing an issue where the text in the h1 tag overflows the div container when viewed on a tablet or mobile device. Can someone please assist me with resolving this problem? Here is how it appears in regular windows This is the result when I shrin ...

htmlcss

Ensuring jQuery ajax requests can still be made when clicking on various links

After successfully creating code for ajax requests and fetching information from the server, I encountered an issue where clicking a link would smoothly transition me to a new page without refreshing the header and footer. However, upon clicking another li ...

jqueryhtmlexpressonclick

Using the <blink> tag on Internet Explorer

Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...

htmlcssinternet-explorer

Using JavaScript to place image data on the canvas in an overlay fashion

I recently wrote the code below to generate a rectangle on a canvas: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canv ...

javascripthtmlcsshtml5-canvas

Using Jquery to make multiple elements sticky and float

Is it possible to have multiple stickyfloat elements that follow each other up? For example, I have multiple articles with large images and I would like the description to stay sticky until you reach the next article. Currently, all the stickyfloat elemen ...

jqueryhtmlcsssticky

The values of checkboxes are not stored as a comma-separated string

My current form setup resembles the following: <form action="MyForm.htm" method="GET"> <input type="checkbox" value="1" id="cb1" name="xxx"/> <input type="checkbox" value="2" id="cb2" name="xxx"/> <input type="checkbox" va ...

c#htmlasp.net.net