Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Positioning mega menu on a sticky navbar


brandyglows

Question

Site URL: http://www.brandyglows.com

Hello, friends!

I'm on 7.0 using the Brine template. I am helping my wife with some custom CSS for the navigation menu on her SquareSpace site. I've implemented a caret-style dropdown menu, and I have figured out the styles for a sticky header. Here's the problem. In order to get the mega menu working, I first styled the dropdown section using `position: fixed` as follows:

/* Style mega menu */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder 
{
  outline: 1px solid purple
  visibility: hidden;
  margin: 0;
  height: auto;
  width: 100vw;
  position: fixed;
  top: 9.5rem;
  left: 0;
  letter-spacing: 0;
  line-height: 1.5rem;
  box-shadow: inset .05rem .05rem .15rem .015rem rgba(0, 0, 0, 0.075);
}

/* Reveal mega menu on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder 
{
  visibility: visible;
}


Note about the below property: I used this strictly for diagnostic purposes.

`outline: 1px solid purple`

Here is the styling on the navbar:

/* Sticky header */
.Header.Header--bottom 
{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 3.5rem !important;
  z-index: 999 !important;
  background-color: #FFF;
  box-shadow: 0 0 .1rem .05rem rgba(0, 0, 0, 0.15);
}

The dropdown worked well before the navbar was `sticky`, but now it is out of position when the user scrolls down, which makes sense. Where the real headache comes in is when I tried to change it to `position: absolute` in an effort to keep it close to the navbar. When I do this, the element scales on resize, and rather than remain full width, it leaves a gap on one side despite setting `width: 100vw`. I know this is probably a noob thing, but I am racking my brain to figure out what to do.


Site — http://www.brandyglows.com
Password — 'temp'

If anyone could have a look and offer a tip, I would be hugely grateful.

Edited by brandyglows
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...