Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding dividers to navigation on mobile templates 7.0 & 7.1


TheSocialGuru
Go to solution Solved by tuanphan,

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

10 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

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?

Edited by TheSocialGuru
Link to post
  • 0

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 post
  • 0
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 post
  • 0
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?

Link to post
  • 0
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.

Link to post
  • 0
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..

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...