Jump to content

Mega menu: change color hover

Recommended Posts

Could someone please help me! I am trying to create a white box over the section hovered over on the navigation strip ( currently showing on "SHOP") . No matter what I do I cannot change the height to fill in the gaps on the top and bottom, and nor the width to make it a little bit longer. Thank you!Capture001.thumb.png.132775b3862a8e28ffc8e2173dd51410.png

Edited by AnnaRadzicki
more info
Link to comment
1 hour ago, AnnaRadzicki said:

Could someone please help me! I am trying to create a white box over the section hovered over on the navigation strip ( currently showing on "SHOP") . No matter what I do I cannot change the height to fill in the gaps on the top and bottom, and nor the width to make it a little bit longer. Thank you!Capture001.thumb.png.132775b3862a8e28ffc8e2173dd51410.png

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
25 minutes ago, AnnaRadzicki said:

You can try the following custom css

/* Disable previous code */
.header-announcement-bar-wrapper.mega-menu-on a:hover {
  background: none !important;
  height: unset !important;

}
/* use psedo element to set background */
.header-announcement-bar-wrapper .wm-mega-menu-trigger:before {
  content:'';
  width: 100%; /*change the width here*/
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}

/*Background color when hovering*/
.header-announcement-bar-wrapper .wm-mega-menu-trigger:hover:before  {
  background: #fff;
}
/*Little configuation*/
.header-announcement-bar-wrapper .wm-mega-menu-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-announcement-bar-wrapper .wm-mega-menu-trigger a {
  z-index: 1;
}

My testing

image.thumb.png.066d2e185fd18c88fce201f38a2b17bb.pngLet me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Try the following code instead previous one

/* Disable previous code */
.header-announcement-bar-wrapper.mega-menu-on a:hover {
  background: none !important;
  height: unset !important;

}
/* use psedo element to set background */
.header-announcement-bar-wrapper .header-nav-list> .header-nav-item:before{
  content:'';
  width: 100%; /*change the width here*/
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}

.header-announcement-bar-wrapper .header-nav-list>div {
  position: relative;
  z-index: 0;
}
.header-announcement-bar-wrapper .header-nav-list> .header-nav-item > a { 
  z-index: 1;
  position: relative;
}

/*Background color when hovering*/
.header-announcement-bar-wrapper .header-nav-list> .header-nav-item:hover a {
  color: #000 !important;
}
.header-announcement-bar-wrapper .header-nav-list>div:hover:before {
  background: #fff;
}

.header-announcement-bar-wrapper .wm-mega-menu-trigger.active-mega::before {
  background: #fff;
}
/*Little configuation*/
.header-announcement-bar-wrapper .wm-mega-menu-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-announcement-bar-wrapper .wm-mega-menu-trigger a {
  z-index: 1;
}
.header-nav-list>div {
  padding-top: 5px;
  padding-bottom: 5px;
}

 

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, DavidStewart said:

@Beyondspace Can you tell me which extension you are using to add the css and for testing purposes? I would love to use that. 

You can find the extension User Css

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.