Burger icon hover color - Support | Kriesi.at

Viewing 26 posts - 1 through 26 (of 26 total)

Author

Posts
July 13, 2018 at 12:19 am #984920

zizibe1
Participant

Hi,

I would like the burger icon to change its colour when I hover on it.

How can I change the burger icon hover color to grey (#969696)?

Best regards,
zizibe1

July 13, 2018 at 8:49 am #985031

Jordan Shannon
Inactive Moderator

Hey zizibe1,

There are no hover states on mobile, so this will not be seen.

Best regards,
Jordan Shannon

July 13, 2018 at 9:58 am #985068

zizibe1
Participant

Hi Jordan,

Thank you for your reply.

But when your presets are Enfold Child > Main Menu > Menu Items for Desktop > Display as icon, is there a possibility to modify the burger icon hover colour from black to grey (#969696) when you hover on it?

Best regards,
zizibe1

July 13, 2018 at 1:53 pm #985151

Jordan Shannon
Inactive Moderator

Hi,

Yes, this is if you have the burger menu activated on the desktop as well. In that case hover works as it should. However, since there is no hover state on mobile devices the effect is not achieved.

Best regards,
Jordan Shannon

July 13, 2018 at 2:12 pm #985163

zizibe1
Participant

Hi Jordan,

Thank you for your reply.

Now I chose “Display as icon”. But where can I modify the burger icon hover colour (although the effect is only for desktop)?

Best regards,
zizibe1

July 13, 2018 at 2:41 pm #985175
Jordan Shannon
Inactive Moderator
Hi,

Add this to quick css:
```
.header_color .av-hamburger-inner:hover{
background:red!important;
}

.header_color .av-hamburger-inner:hover::before{
background:red!important;
}

.header_color .av-hamburger-inner:hover::after{
background:red!important;
}
```
Best regards,
Jordan Shannon
July 13, 2018 at 2:53 pm #985182

zizibe1
Participant

Hi Jordan,

Thank you for the code. I added it to Quick CSS.

Now, the burger icon turns only red when you hover exactly on one of the three bars of the icon. If you hover between the bars, the burger icon stays black. How can I fix this?

Best regards,
zizibe1

July 14, 2018 at 10:02 am #985457
Vinay
Inactive Moderator
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
/* CSS - Burger menu hover color */

.av-hamburger:hover .av-hamburger-inner,
.av-hamburger:hover .av-hamburger-inner:before,
.av-hamburger:hover .av-hamburger-inner:after {
    background:red!important;
}

/* End CSS */
```
Best regards,
Vinay
July 14, 2018 at 3:08 pm #985483

zizibe1
Participant

Hi Vinay,

Thank you for your reply.

1. I removed the previous code from Quick CSS and added the new code to it. Now, when you hover on the burger icon, first the middle bar changes its color to red and then – slightly time-shifted – the upper and the bottom bar change their color to red. But they should change their color simultaneously. How can I fix this?

2. I already added several codes to Quick CSS. Each of them starts with /* … */ ( three dots: here, I wrote the function of the code). Should I end every code with /* End CSS */?

Best regards,
zizibe1

July 15, 2018 at 1:39 am #985529
Vinay
Inactive Moderator
Hi,

Thank you for writing back to us.

1. Please try the below code to make the hover work as intended.
```
.av-hamburger:hover .av-hamburger-inner,
.av-hamburger:hover .av-hamburger-inner:before,
.av-hamburger:hover .av-hamburger-inner:after {
    background: red !important;
}

.av-hamburger:hover .av-hamburger-inner {
    transition:background .05s ease .05s
}
```
2. Any text you see within /* … */ is a CSS comment for human reference only. It is up to you to add the comments so when you return to the code after several days you will know what is what :)

Best regards,
Vinay
July 16, 2018 at 2:34 pm #985936

zizibe1
Participant

Hi Vinay,

Thank you for your reply.

1. I replaced the previous code by the new one. Now, the three bars of the burger icon change their hover color simultaneously. But when I open the mobile menu and hover on the little cross in the right corner of the browser window, the two lines of the cross don’t change their color simultaneously. How can I fix this too?

2. Okay. But is it necessary to end every single code with /* End CSS */?

Best regards,
zizibe1

July 16, 2018 at 3:22 pm #985950

Vinay
Inactive Moderator

Hi,

1. The hover properties are assigned to a tap action in mobile browsers since hover feature is not recognized. To change the background color back to black you have to click outside the icon area. This is a browser limitation and there is not much we can do about it. As an alternate solution, you can enable background hover change only for desktops using media query.

2. No, it is not necessary to add comments at the end of CSS code.

Best regards,
Vinay

July 16, 2018 at 7:05 pm #986059

zizibe1
Participant

Hi Vinay

Thank you for your replay.

1. Sorry, but I think I’ve to rephrase my question.

I went to Enfold Child > Main Menu > General > Menu Items for Desktop and chose “Display as icon”.

On desktop, I went to my website and clicked on the burger icon to open the menu (white font on slightly transparent black background).

Now, there’s a little cross in the upper right corner of the browser window (by clicking on this cross, I can close the menu).

When I hover on this little cross, it changes its color from white to red. That’s okay. I want to keep that.

But the problem is that the two lines of the cross change their color slightly time-shifted. It looks like something’s broken.

How can I fix this?

2. Okay. Thank you very much for this information.

Best regards,
zizibe1

July 20, 2018 at 12:51 am #987661
Vinay
Inactive Moderator
Hi,

Sorry for the late response, I have updated the code to the below
```
/* Burger menu hover color possible only for desktop*/
.av-hamburger:hover .av-hamburger-inner,
.av-hamburger:hover .av-hamburger-inner:before,
.av-hamburger:hover .av-hamburger-inner:after {    
    animation: color-fade .35s forwards;
}


@keyframes color-fade {
  0% {  }
  100% { background: red; }
}
```
Please review your site and let us know if the menu color on hover looks ok now :)

Best regards,
Vinay
July 22, 2018 at 12:15 pm #988343
zizibe1
Participant
Hi Vinay,

Yes, it looks okay now. Thank you very much for your support.

I added the word “Menü” (in English: menu) before the burger icon by adding this code to Quick CSS:
```
/* add the word "Menü" before the hamburger icon */
@media only screen and (min-width: 769px) {
  li.av-burger-menu-main a:before {
    content: 'Menü';
    position: absolute;
    left: -40px;
    top: 0%;
  }}
```
Now, the hover color of the word “Menü” is grey. I would like to change hover color to red.

How can I achieve this?

Best regards,
zizibe1
July 22, 2018 at 1:43 pm #988372
Victoria
Inactive Moderator
Hi zizibe1,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (min-width: 769px) {
  #top #header .av-main-nav > li.av-burger-menu-main:hover > a::before {
    color: red;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
July 22, 2018 at 3:48 pm #988423

zizibe1
Participant

Hi Victoria,

Thank you for your reply.

I added the code to Quick CSS. Now, when you hover on the word “Menü” next to the burger icon, it changes its color to red. When you move the cursor away from the word “Menü”, first it changes its color to grey and then to black. But it should change its color immediately to black when you move the cursor away.

How can I fix this?

PS: I also removed the code from Quick CSS and put it into themes/enfold/css/custom.css, but this didn’t work.

Best regards,
zizibe1

July 24, 2018 at 12:46 am #988979
Vinay
Inactive Moderator
Hi,

Please remove previous code for menu and hover and replace it with the following code.

NOTE: There will be a slight delay in hover color change between the word menu and icon. This is because of the way the browser implements the CSS, there is not much we can do about this.
```
/* Burger menu hover color possible only for desktop*/

li.av-burger-menu-main:hover .av-hamburger-inner,
li.av-burger-menu-main:hover .av-hamburger-inner:before,
li.av-burger-menu-main:hover .av-hamburger-inner:after {    
    animation: color-fade .35s forwards;
}

@keyframes color-fade {
  0% {  }
  100% { background: red; }
}

/* add the word "Menu" before the hamburger icon */
@media only screen and (min-width: 769px) {
  .av-hamburger:before {
    content: 'Menu';
    position: absolute;
    left: -40px;
    top: 0%;
  }
/* Hover color */
li.av-burger-menu-main:hover .av-hamburger:before {
	color:red;
}
}
```
Best regards,
Vinay
July 24, 2018 at 10:42 am #989092

zizibe1
Participant

Hi Vinay,

Thank you for the code. I removed the previous code and replaced it with the new one.

I noticed the the slight delay in hover color change between the word “Menü” and icon.

But what about the issue I described in my last post? Do you see any possibility to fix this?

When you move the cursor away from the word “Menü”, first it changes its color to grey and then to black. But it should change its color immediately to black when you move the cursor away.

Best regards,
zizibe1

July 24, 2018 at 1:14 pm #989155
Vinay
Inactive Moderator
Hi,

Sorry it slipped my mind to address the other issue. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
/* CSS - Burger menu font color */

#top .av-hamburger,
#top .av-hamburger:before  {
	color: #000 !important;
}
#top .av-hamburger:hover:before  {
	color: red;
}
	
```
Best regards,
Vinay
July 24, 2018 at 2:08 pm #989193

zizibe1
Participant

Hi Vinay,

Thank you for your reply.

I added the code to Quick CSS. But now, the hover color is gone. When I hover on the word “Menü”, it stays black. It doesn’t turn red anymore when I hover on it.

How can I fix this?

Best regards,
zizibe1

July 26, 2018 at 3:42 am #990011
Vinay
Inactive Moderator
Hi,

Please replace the previous code with the below snippet.

CSS Snippet:
```
/*------------------------*/
/* Add text to the left side
   of the burger icon.
/*------------------------*/


.av-hamburger {
    min-width: 80px;
}

.av-hamburger .av-hamburger-box strong {
    display: block!important;
    position: absolute;
    left: calc( -100% - 10px);
    top: 50%;
    transform: translateY(-50%);
}

.av-hamburger .av-hamburger-box {    
    float: right;   
    max-width: 50px;
}


/*------------------------*/
/* Hamburger hover color
/*------------------------*/

.av-hamburger .av-hamburger-box strong {
    color: #000;
}

.av-burger-menu-main a:hover .av-hamburger .av-hamburger-box strong {
    animation: textcolor .35s forwards;
}

/* Burger menu hover color possible only for desktop*/

.av-burger-menu-main a .av-hamburger-inner,
.av-burger-menu-main a .av-hamburger-inner:before,
.av-burger-menu-main a .av-hamburger-inner:after {    
    background-color: #000;
}

.av-burger-menu-main a:hover .av-hamburger-inner,
.av-burger-menu-main a:hover .av-hamburger-inner:before,
.av-burger-menu-main a:hover .av-hamburger-inner:after {    
    animation: bgcolor .35s forwards;
}


@keyframes bgcolor {
  0% { background: #000; }
  100% { background: red; }
}

@keyframes textcolor {
  0% { color: #000 }
  100% { color: red; }
}
```
Best regards,
Vinay
July 26, 2018 at 8:46 pm #990411

zizibe1
Participant

Hi Vinay,

I replaced the previous code with the new one. Now it works fine. Thank you very much!

I tried to change the English word “Menu” at the left side of the burger icon to the German word “Menü”, but I couldn’t figure it out.

Could you please tell me how to do that?

Best regards,
zizibe1

July 27, 2018 at 12:03 am #990514
Vinay
Inactive Moderator
Hi,

You can add the custom text now. Please check the second block of code in “Hamburger hover color” section. Adjust the min and max width value for “.av-hamburger-box” accordingly.
```
/*------------------------*/
/* Add text to the left side
   of the burger icon.
/*------------------------*/


.av-hamburger {
    min-width: 80px;
}

.av-hamburger .av-hamburger-box strong {
    display: block!important;
    position: absolute;
    left: calc( -100% - 10px);
    top: 50%;
    transform: translateY(-50%);
}

.av-hamburger .av-hamburger-box {    
    float: right;   
    max-width: 50px;
}


/*------------------------*/
/* Hamburger hover color
/*------------------------*/

.av-hamburger .av-hamburger-box strong {
    color: #000;
    visibility: hidden;
}

/* Add your custom menu text */
#top .av-hamburger .av-hamburger-box strong:before {
    content: 'menu';
    visibility: visible;
    line-height: 14px;
}

.av-burger-menu-main a:hover .av-hamburger .av-hamburger-box strong {
    animation: textcolor .35s forwards;
}

/* Burger menu hover color possible only for desktop*/

.av-burger-menu-main a .av-hamburger-inner,
.av-burger-menu-main a .av-hamburger-inner:before,
.av-burger-menu-main a .av-hamburger-inner:after {    
    background-color: #000;
}

.av-burger-menu-main a:hover .av-hamburger-inner,
.av-burger-menu-main a:hover .av-hamburger-inner:before,
.av-burger-menu-main a:hover .av-hamburger-inner:after {    
    animation: bgcolor .35s forwards;
}


@keyframes bgcolor {
  0% { background: #000; }
  100% { background: red; }
}

@keyframes textcolor {
  0% { color: #000 }
  100% { color: red; }
}
```
Best regards,
Vinay
July 27, 2018 at 12:31 pm #990659

zizibe1
Participant

Hi Vinay,

Perfect. Thank you very much for your support and your patience.

Best regards,
zizibe1

July 28, 2018 at 3:26 am #990865

Vinay
Inactive Moderator

Hi,

Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Vinay
Author

Posts

Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘Burger icon hover color’ is closed to new replies.