Jump to content

Desktop Navigation Rollovers and Mobile Menu Rollovers

Go to solution Solved by Beyondspace,

Recommended Posts

Posted

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

  • Replies 2
  • Views 940
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution
Posted
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

image.thumb.png.371b4a6276b40c02f0fd47a48be5dec7.png

image.thumb.png.f3132092fe9483f669528f59d2845f3a.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.