Jump to content

Faking a secondary nav (left and right aligned)

Recommended Posts

Site URL: https://bison-prism-bf6c.squarespace.com/


In the link below @tuanphan kindly gives code that allows the nav to be split into a pseudo second nav - using the nth child selector to define at which point the split happens.

I'd like to do something similar, but instead of having it split onto a new line I'd like all items after the nth child to right align to the div (my main nav is left aligned).

At the moment I do have one fake secondary nav item on the right but this is simply a restyle of the Button available within the Elements option found in the global nav. This serves me perfectly from an aesthetic point of view (although, on mobile it needs some work to properly blend in with the main nav items) but the thing is, I'm likely to need more that one item on the right.

So, any tips?

Thanks loads for your time and knowledge.



Link to comment
  • Replies 10
  • Views 1.4k
  • Created
  • Last Reply
  • 2 months later...
  • 1 month later...
On 12/8/2020 at 9:11 AM, TessMc said:

@Celia081 I couldn't get the code above to work for my site on 7.1, but noticed you achieved left and right nav (with logo at centre) on skymoonandme.com. Could you kindly share the CSS you  added? TIA!

They emailed me to solve this.

You need to use JavaScript. CSS can't solve this.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi there @tuanphan and/or @rwp

Thanks again for your help last time, I have a follow up question in order to hopefully fix a visual bug.

To explain, some of my nav items are 'folders' which of course display as drop-downs. If on the left, the drop-down displays correctly - with a good amount of vertical padding between nav folder/parent item and the drop-down list. If a nav item is on the right (placed via the code you helpfully provided) the drop down seems to loose it's vertical padding and as a result, displays over the top of the main nav items.

Site URL is updated and is now - https://www.ballihoo.co.za/about-ballihoo

Mousing over "Wine" gives the desired/standard result, mousing over "About" shows the visual bug I'd like to fix.

Any clues as to how to solve this would be greatly appreciated!

Link to comment

Did a bit on digging and was able answer my own question:

To explain a little further it only seems to happen to a folder that is the first item on the right hand side (if I put another nav item in front, the drop down would appear fine). Not sure why this is, but I fixed it with the below.


/*fix folder dropdown padding issue*/
.header-nav-folder-content {
  top: 1.6em !important;


Link to comment


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.