Desktop Navigation Rollovers and Mobile Menu Rollovers

7 hours ago, DavvaMC said:

Hi

Can't for the life of me get the rollover colors on links to work with custom code.

This is what I currently have.

}
.header-nav-item a {
color: #fff;
}
.header-nav-iem a:hover{
color: #000 !important;
}
.header-nav-iem a:active{
color: #ff662f !important;
}

/*MOBILE MENU*/
.header-menu-nav-item a,
a .header-menu-nav-item-content
{
font-size: 14px;
text-decoration: none !important;
}
nav.header-menu-nav-list .header-menu-nav-item * {
background-image: none !important;
text-decoration: none !important;
border: none !important;
}
.header-menu-cta {
color: #ff662f !important;
padding-bottom: 15vh !important;
}
.header-menu-cta a.theme-btn--primary.btn {
color: #ff662f !important;
background-color: transparent !important;
border: 1px solid #fff !important;
}
.header--menu-nav-item-active a{color:#7bb6b1!important;}
/*END MOBILE MENU*/

I also need to change the rollover fo the CTA button when you open the mobile menu.

Any ideas as to what I am doing wrong?

https://www.cn8.co.uk/new-home

Thanks

You can try the following custom CSS

/*style on desktop*/
body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper .header-nav-item a:hover {
  color: red;
}
/*Style on mobile*/
@media only screen and (max-width: 767px){
  .header--menu-open .header-menu-cta a.theme-btn--primary.btn {
    color: #fff !important;
  }
}

My testing