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

Question

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 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 comment
  • 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 comment
  • 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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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