How to Change Hover Color on Navigation Bar?

Dazzling
1

Hi,

I would like to change the current green color to this color c8557f when I hover on my menu bar. Also for the ‘Post Comment’ button and ‘Search’ button.

Is it possible not to have the rectangular shape when I hover but just have the text highlighted? Example, for this page https://colorlibsupport.com/c/dazzling/, the text on the menu bar is highlighted without any shapes.

Yvonne

2

Hi Yvonne,

I hope you are well today and thank you for your questions.

I would like to change the current green color to this color c8557f when I hover on my menu bar. Also for the ‘Post Comment’ button and ‘Search’ button.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

#page .btn-default, .label-default, 
#page  .navbar-default .navbar-nav > .active > a, 
#page .navbar-default .navbar-nav > .active > a:hover, 
#page .navbar-default .navbar-nav > .active > a:focus, 
#page .navbar-default .navbar-nav > li > a:hover, 
#page .navbar-default .navbar-nav > li > a:focus, 
#page .navbar-default .navbar-nav > .open > a, 
#page .navbar-default .navbar-nav > .open > a:hover, 
#page .navbar-default .navbar-nav > .open > a:focus, 
#page .dropdown-menu > li > a:hover, 
#page .dropdown-menu > li > a:focus, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, 
#page .dropdown-menu > .active > a, 
#page .navbar-default .navbar-nav .open .dropdown-menu > .active > a{
  background-color: #c8557f;
    border-color: #c8557f;
}
Is it possible not to have the rectangular shape when I hover but just have the text highlighted? Example, for this page https://colorlibsupport.com/c/dazzling/, the text on the menu bar is highlighted without any shapes.

Yes and to achieve this please use the below CSS code instead of above CSS code.

#page .btn-default, .label-default{
  background-color: #c8557f;
    border-color: #c8557f;
}

#page  .navbar-default .navbar-nav > .active > a, 
#page .navbar-default .navbar-nav > .active > a:hover, 
#page .navbar-default .navbar-nav > .active > a:focus, 
#page .navbar-default .navbar-nav > li > a:hover, 
#page .navbar-default .navbar-nav > li > a:focus, 
#page .navbar-default .navbar-nav > .open > a, 
#page .navbar-default .navbar-nav > .open > a:hover, 
#page .navbar-default .navbar-nav > .open > a:focus, 
#page .dropdown-menu > li > a:hover, 
#page .dropdown-menu > li > a:focus, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, 
#page .dropdown-menu > .active > a, 
#page .navbar-default .navbar-nav .open .dropdown-menu > .active > a{
  background-color: transparent;
    border-color: transparent;
    color: #c8557f;
}

Best Regards,
Movin

3

Thanks Movin. Could you also help me to make the ‘Continue Reading’ words on my home page white?

4

You are most welcome here :slight_smile:

Could you also help me to make the ‘Continue Reading’ words on my home page white?

You can achieve this by using the below CSS code.

a.btn.btn-default.read-more {
    color: #fff;
}
5

Thanks for your help Movin :slight_smile:

6

You are most welcome here :slight_smile: