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!

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!

Can you share your URL so I can check it?

primrose-gar-cl8a.squarespace.com

25 minutes ago, AnnaRadzicki said:

 

primrose-gar-cl8a.squarespace.com

 

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

Let me know how it works on your site

The looks better for the width, but is there anyway to fill the gaps on the top and bottom that are still showing red? 

Thank you!

Would there be any chance to get the box to stick while looking through the dropdown menu as well, i have looked everywhere. I appreciate your help! 

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

I am using the CSS custom section in squarespace but using chrome as my browser. 

I am not sure that actually answers your question or no, i apologize! 

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;
}

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

On 5/15/2024 at 1:52 AM, Beyondspace said:

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;
}

 

Weirdly enough, this still didnt work, only made the red space bigger, which is the problem I was running into when I was trying this before bringing it to this thread. I guess its not a big deal, but wish there was some way to fill the gaps. Thanks for your help!