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


  • Content Count

  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Site URL: http://www.brandyglows.com Hello, everyone! This seems to be an unusual problem, as I haven't seen anyone else ask about it. I've been working on a site which features a sticky navbar and a mega menu dropdown. I don't have access to the HTML, so I'm having to use a lot of pseudo elements and some jQuery to get things right. Here's the dilemma: due to limitations in the CMS platform, I'm breaking this template into pieces and putting it back together again. Right now, that means I've taken one of the CMS-managed footer layouts and appended it to the header navbar to be used as a dropdown for a full-width mega menu. This worked well enough at first, but only using position: fixed to get the centering right. A few features later, the navbar is sticky, it resizes and displays a logo on scroll, and long story short, the position: fixed mega menu looks like a detached appendage when viewed further down the page, jutting out of the middle of the viewport. I am thinking I need a position: absolute solution, to tether it back to its navbar brethren. But centering it at width: 100vw is proving to be a challenge. When I resize the window, it gaps left and right, and clearly loses its center. After poking around, I'm realizing that it's caused by the 100vw mega menu div being "nested" inside a roughly 30px navbar element which is arbitrarily placed, and not centered. I've seen plenty of great answers to absolute centering here, which are brilliant, but don't speak to the problem of centering a large absolute div in a small relative parent, and maintaining center on resize when the parent is not centered to begin with. Is there a way around this? Thanks for having a look, if you did so. The CSS: /* Frankenmenu */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder { padding: .65rem 0 0 0; box-sizing: border-box; visibility: hidden; margin-left: -432.5px; height: auto; width: 100vw; position: absolute; left: 50%; top: 3.05rem; letter-spacing: 0; line-height: 1.5rem; box-shadow: inset 0 .15rem .15rem -.10rem rgba(0, 0, 0, 0.1), 0 .05rem .25rem 0 rgba(0, 0, 0, 0.1); } /* Extend Frankenmenu hitbox */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder::before { content: ""; display: block; height: 1rem; position: relative; top: -.5rem; width: 100%; } /* Reveal on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder { visibility: visible; } /* Hide template menu on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder > a { display: none; } The site: URL — http://www.brandyglows.com P/W — 'temp'
  2. 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.
  3. Okay, very cool. And thanks! I'm excited to figure out these challenges and hopefully have a much deeper understanding of SS at the end of it. Congrats on your projects, bytheway!
  4. Awesome, thank you! Maybe I will be fortunate enough to recieve his amazing feedback. Did you build or customize the mega menu yourself with guidance, or did you receive it fully built? Thanks again!
  5. Thanks, @tuanphan! Don't know if you clicked through my link or not, but I have walked through the guide that you shared, and it is somewhat functional on my site already. I was hoping to get a little feeedback and guidance RE: improving it or customizing the implementation as I'm not an expert on the SS template files. PS. I'm not able to afford a paid plugin right now, and I also would enjoy the challenge of trying to customize it myself, once I get an idea of how SS templates are structured and what needs to be done. But thank you for taking the time!
  6. Hi @Claire_auck, @tuanphan and @paul2009, This is my first post here and I have appreciated reading all of your posts. I am at the start of work on my wife's website, and I am really interested in building out a mega menu similar to the one(s) here: https://www.birchbox.com. I have some design and a little bit of JS background, and I am happy to do the legwork needed, but could someone please point me in the right direction? Is jQuery needed? Thank you so much, this seems to be a great community. Edit: I am on SS 7.0 using Brine. Oops, and here is the site info. URL — https://brandyglows.squarespace.com P/W — temp
  • Create New...