Responsive Menu and Split Navigation | 7.1

Site URL: https://demo.flothemes.com/velvet-template/

Hello, 

I would like to create a split navigation of 6 items (3 on each side) which is responsive and the navigation items are related to the logo. 

Example of responsiveness of the split navigation around logo is this: https://demo.flothemes.com/velvet-template/ 

Is it possible to create something from this code (see below)  but with the smooth responsiveness of the example above?

(Code source: https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71)

.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -50px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 340px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

Thank you!

Possible. What is your site url? Do you use Personal or Business Plan? Each plan will have a different code.

Hello,

Here is the access to the website, it's on a business plan:

d-a-pro.squarespace.com
pw: papaya-triangle

Thank you in advance!

6 hours ago, Darya said:

Hello,

Here is the access to the website, it's on a business plan:

d-a-pro.squarespace.com
pw: papaya-triangle

Thank you in advance!

Can you remove code you used to add split nav? We can test new code easier

Yes, I've removed the nav code. 

FYI I'm also styling the drop-down menus with the following code, ok to keep for now?

// HOVER STATE NAV LINE
.header-nav-item {
  position: relative;
}

body:not(.header--menu-open) .header-nav-folder-content {
    background-color: white;
}

.header-nav-item::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1.5px;
  bottom: -8px;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  
}

.header-nav-item:not(.header-nav-item--active):hover::before {
  transform: scaleX(1);
  
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
  color: #000 !important;
  opacity: 0.8;
}

// MENU INVERT
.homepage .header-nav-item {
    filter: invert(1);
    -webkit-filter: invert(1);
}

.homepage .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

// TRANSPARENT DROPDOWN
.header-nav-folder-content {
    background-color: transparent !important;
}

Hi,

Can you change layout to Left Nav - Middle Logo?

Then add this to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

Hi, 

It's partially there - the items in the drop-down menu are showing up all together with the top folder item. 

Thank you for your help.

Tuan,
I would like to bring the on-hover line animation into the dropdown menu items  and for the "active" top menu items to match.  Is this possible?

Homepage:

Our Story:

To fix dropdown, add this code

<style>
  /* Fix dropdown */
.header-actions--right .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    padding: .5em 1em;
    text-align: left;
    width: 200px;
    z-index: 10;
    margin-left: -1em;
}
.header-actions--right a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-actions--right .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}
</style>

You mean when user on Our Store >> Make it underline?

Is there a way to make the navigation menu items scale in size (font gets smaller) when in tablet mode?  

The idea is to have the font get slightly smaller to prevent breaking into two lines when on tablet right before mobile.

On 7/16/2022 at 12:50 AM, Darya said:

Is there a way to make the navigation menu items scale in size (font gets smaller) when in tablet mode?  

The idea is to have the font get slightly smaller to prevent breaking into two lines when on tablet right before mobile.

You mean Ipad Pro Landscape mode? On most tablets, the header will change to the burger menu

On 7/18/2022 at 4:25 AM, tuanphan said:

You mean Ipad Pro Landscape mode? On most tablets, the header will change to the burger menu

I would like to do the same thing. I would like to see if there is a way for the navigation menu to scale based on the size of a browser. Like this site: https://www.legendsmarketing.com

Right now once the page is reduced stacks the menu on two lines. Is there a solution to scale the fonts?

On 11/2/2022 at 5:42 AM, Daxamillion said:

I would like to do the same thing. I would like to see if there is a way for the navigation menu to scale based on the size of a browser. Like this site: https://www.legendsmarketing.com

Right now once the page is reduced stacks the menu on two lines. Is there a solution to scale the fonts?

What is your site url?

On 7/14/2022 at 3:29 PM, tuanphan said:

Hi,

Can you change layout to Left Nav - Middle Logo?

Then add this to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

 

Code work on desktop, but on mobile, its look wired.

On 1/26/2023 at 7:39 AM, pexeldio said:

Code work on desktop, but on mobile, its look wired.

That code runs on desktop only. You try checking it again on real mobile.

If it still appear weird, can you share link to your site? We can check easier

I have another issue, I used your code to add a add to cart button on summery block, is it possible to when click on add to cart it will no take user to different page, Just product should be added on the cart?

19 hours ago, pexeldio said:

I have another issue, I used your code to add a add to cart button on summery block, is it possible to when click on add to cart it will no take user to different page, Just product should be added on the cart?

Hi,

I don't know this. You can consider using Product Blocks instead

On 1/28/2023 at 2:10 PM, tuanphan said:

Hi,

I don't know this. You can consider using Product Blocks instead

On 7/14/2022 at 2:29 PM, tuanphan said:

Hi,

Can you change layout to Left Nav - Middle Logo?

Then add this to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

 

Can you help me? I need search bar on the left https://local-narcissist.squarespace.com/

On 7/31/2023 at 12:20 AM, azubair653 said:

 

Can you help me? I need search bar on the left https://local-narcissist.squarespace.com/

Move this?

17 hours ago, tuanphan said:

Move this?

yes

19 hours ago, tuanphan said:

Move this?

Can we achieve this? @tuanphan

Hello

I have a question on the above topic of split navigation. I put this code injection into the footer:

I changed layout to left nav, middle logo then added this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

It works well except I have 8 pages and I would like 5 to the left and 3 on the right... when I try to change numbers in the code they disappear. My website is https://www.jennifercawley.co.uk

Thank you 

Claire

On 8/1/2023 at 3:40 PM, tuanphan said:

Move this?

Which code did you use to add Search bar on right of logo? I guess we will need to tweak that code

On 8/2/2023 at 4:20 PM, cdeasy said:

Hello

I have a question on the above topic of split navigation. I put this code injection into the footer:

I changed layout to left nav, middle logo then added this.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

 

It works well except I have 8 pages and I would like 5 to the left and 3 on the right... when I try to change numbers in the code they disappear. My website is https://www.jennifercawley.co.uk

Thank you 

Claire

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+5) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+6) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
</style>

Amazing! Thank you so much!!