Jump to content

Adding dividers to navigation on mobile templates 7.0 & 7.1

Go to solution Solved by tuanphan,

Recommended Posts

  • TheSocialGuru changed the title to Adding dividers to navigation on mobile templates 7.0 & 7.1
  • Solution

It looks like you solved with this code?

.header-menu-nav-item {
    display: inline-block;
    padding-bottom: 0em;
    padding-top: 0em;
    border-bottom: 1.1px solid grey;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Building off of @tuanphan's code.

Replace the previous code with the following.

.header-menu-nav-item {

  border-bottom : 1.1px solid grey;
  display : inline-block;
  margin-left : 4vw;
  padding : 0;
  width : 90vw;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Here's what I love about CSS. Multiple ways to get nearly the same effect. This is for the more technical among us.

.header-menu-nav-item a {

  border-bottom : 1.1px solid grey;
  
  }

This "one liner" takes advantage of the natural padding of the parent element as set by SS. By that I mean without any custom CSS to change the parent element.

My modification of tuanphan's code

27479464_ScreenShot2021-01-26at6_07_58PM.png.c4e62c0675f18cd51306181109352c10.png

The "one liner"

1325123042_ScreenShot2021-01-26at6_11_49PM.png.2a6b1647675d8251097eafe7541cf3a1.png

Now as soon as you need to shrink the line more, then the "one liner" doesn't have any advantage as you'd have to play with margins, padding, width. etc..

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
9 hours ago, creedon said:

Building off of @tuanphan's code.

Replace the previous code with the following.


.header-menu-nav-item {

  border-bottom : 1.1px solid grey;
  display : inline-block;
  margin-left : 4vw;
  padding : 0;
  width : 90vw;
  
  }

Let us know how it goes.

This worked fantastically thanks @creedon  

Im also trying to create and effect when the underline of the header menu swoops to the right when you hover over it . do you know how id do this?

Link to comment
On 1/27/2021 at 3:58 AM, TheSocialGuru said:

This worked fantastically thanks @creedon  

Im also trying to create and effect when the underline of the header menu swoops to the right when you hover over it . do you know how id do this?

Do you still need help?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 1/27/2021 at 5:58 PM, TheSocialGuru said:

This worked fantastically thanks @creedon  

Im also trying to create and effect when the underline of the header menu swoops to the right when you hover over it . do you know how id do this?

Do you have an example? I don't quite understand.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/20/2021 at 12:58 AM, TheSocialGuru said:

Yes the example of this is actually within Squarespace so say you hover over the headings on your left like pages, design or commerce it has a swiping left underline on hover

You posted on Facebook? I remeber I answered a similar question on FB..

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.