Jump to content

Positioning mega menu on a sticky navbar

Recommended Posts

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 */
  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.

Link to comment
  • 3 weeks later...
  • Replies 2
  • Views 1.8k
  • Created
  • Last Reply
  • 11 months later...


This topic is now archived and is closed to further replies.

  • 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.