Faking a secondary nav (left and right aligned)

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.

Site is private

🤦‍♂️ Sorry

Have now put it behind a password

pass: VivaLaSecondaryNav

Logo - Left Menu - Right Menu

or

Left Menu - Logo - Right Menu?

.header-nav-item.header-nav-item--folder:nth-child(2) {
  display: flex;
  margin-left: auto;
}

.header-nav-list {
  width: 100% !important;
}

@tuanphan It's Logo - Left Menu - Right Menu that I am after.

@rwp has kindly helped me out though. Thank you both for your time, energy and knowledge. Much appreciated!

Hi @tuanphan,

I have the same question. My website is www.skymoonandme.com

I would like to have the navigation bar:

 Right: Sessions Projects Shop   Center: Logo Left: About Connect

Can you help??? Much appreciated, in advance. 

@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!

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.

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!

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