Adding dividers to navigation on mobile templates 7.0 & 7.1

Site URL: https://www.reallygardenproud.com

Does anyone know how to add dividers to navigation on mobile templates 7.0 & 7.1 like this

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

Yeah I did thanks, one thing I’m stuck on though is how i shorten the width of the line on both sides so the lines centred but not touching sides of page?

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.

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

The "one liner"

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

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?

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?

On 2/2/2021 at 2:12 PM, tuanphan said:

Do you still need help?

Yeah I do

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.

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

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