Jump to content

Responsive Menu and Split Navigation | 7.1

Recommended Posts

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!

Edited by Darya
Link to comment
  • Darya changed the title to Responsive Menu and Split Navigation | 7.1
  • 2 weeks later...
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

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

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

Link to comment

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>

 

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

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:

162472883_ScreenShot2022-07-14at6_37_43PM.png.9ec9e0616f6f70bb6ea58e7f9925e29f.png

 

Our Story:

image.png.b8ee33f912caf61f27e136b26da0ae36.png

Edited by Darya
Link to comment

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?

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

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.

Link to comment
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

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
  • 3 months later...
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?

Link to comment
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?

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
  • 2 months later...
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.

Link to comment
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

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
19 hours ago, pexeldio said:

image.thumb.png.9f0af9263b1e9b115408ea8c34ac9156.pngI 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

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
  • 6 months later...
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/image.thumb.png.87b50fdedc507a1e622543629d1a8c19.png

Link to comment

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

Link to comment
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>

image.thumb.png.005815bf1a401f72fc38d40d2af1dd3a.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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