Desktop Hamburger - Underline navigation code adaptation help

Hello,

I have recently implemented a hamburger menu for a website I am working on for the desktop & mobile versions.

I was previously using a nice code that underlines the navigation menu when you hover over the links, now that I have switched to a hamburger menu style I was wondering if I could slightly alter my code to target the hamburger menu navigation? I am assuming I can re-target the code to work the same but just targetting the hamburger menu nav instead now.

Below is part of the code I am using - I have highlighted the part it currently targets which was my old navigation menu. Is it as simple as replacing header nav a with the source for the hamburger menu nav? Does anyone know how to target this section of the site and if so what is it?

// Left Nav Line //

@media all and (min-width:840px){
header nav a {
  display: inline-block !important; 
  float: left;
}

I am using the original version of squarespace and I am using the brine template - I've changed the mobile break point so I could achieve the hamburger menu, now I would like to have the ability to underline the navigation options when a user highlights over them.

 

@Thursting Each template will have different class for Hamburger Menu. So can you share link to your site?

@tuanphan Hey, sorry I have been away and I am back now.

Here is a link to the site: https://tortoise-dove-xgz3.squarespace.com/ 

Let me know if you can help 🙂

44 minutes ago, Thursting said:

@tuanphan Hey, sorry I have been away and I am back now.

Here is a link to the site: https://tortoise-dove-xgz3.squarespace.com/ 

Let me know if you can help 🙂

add to home > design > Custom css

a.Mobile-overlay-nav-item:hover {
    color: red !important;
}

Hey Tuan,

That's great - Much appreciated my man. So I assume I can use:

a.Mobile-overlay-nav-item:hover {

With my underline code to add this to the hamburger menu. May I ask also, how you found this? I am still trying to figure out how to target certain parts of the page using google css inspect element. 

Thanks again!

Here's the code I am going to adapt, assuming I can!

@media all and (min-width:840px){
header nav a {
  display: inline-block !important; 
  float: left;
}
header nav a:hover:after{
  transform: scaleX(0.97);
  }
header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #000000;  
  transform: scaleX(0);  
  transition: transform 300ms ease-in-out;
  z-index: 999;
  transform-origin :0% 100%;
 }
}
 

I have tweaked like this so far:

@media all and (min-width:840px){
a.Mobile-overlay-nav-item {
  display: inline-block !important; 
  float: left;
}
a.Mobile-overlay-nav-item:hover:after{
  transform: scaleX(0.97);
  }
a.Mobile-overlay-nav-item:after {
  display:block;
  content: '';
  border-bottom: solid 2px #000000;  
  transform: scaleX(0);  
  transition: transform 300ms ease-in-out;
  z-index: 999;
  transform-origin :0% 100%;
 }
}

It works, but the underline is very long and longer than the word so I will play around with some things to see if I can fix it!

Here is how it looks currently:

https://www.screenmailer.com/v/0Rvy6aABaxwaRcg

I just need to crack what alters the length and starting posistion of the underline and it's sorted.

18 minutes ago, Thursting said:

Hey Tuan,

That's great - Much appreciated my man. So I assume I can use:

a.Mobile-overlay-nav-item:hover {

With my underline code to add this to the hamburger menu. May I ask also, how you found this? I am still trying to figure out how to target certain parts of the page using google css inspect element. 

Thanks again!

Right Click on a nav item > Inspect Element

7 minutes ago, Thursting said:

I have tweaked like this so far:

@media all and (min-width:840px){
a.Mobile-overlay-nav-item {
  display: inline-block !important; 
  float: left;
}
a.Mobile-overlay-nav-item:hover:after{
  transform: scaleX(0.97);
  }
a.Mobile-overlay-nav-item:after {
  display:block;
  content: '';
  border-bottom: solid 2px #000000;  
  transform: scaleX(0);  
  transition: transform 300ms ease-in-out;
  z-index: 999;
  transform-origin :0% 100%;
 }
}

It works, but the underline is very long and longer than the word so I will play around with some things to see if I can fix it!

 

a.Mobile-overlay-nav-item:after {
  display:block;
  width:100px;
  margin: 0 auto;
  content: '';
  border-bottom: solid 2px #000000;  
  transform: scaleX(0);  
  transition: transform 300ms ease-in-out;
  z-index: 999;
  transform-origin :0% 50%;
 }

Hey Tuan,

Thanks - I also tried altering the transform-origin but it doesn't seem to affect it. 

I have decided to change my design, your hover code influenced me 🙂 I have tweaked the code you originally sent so its a light grey upon hover but i'd like to make the text englarge slightly. Something like the pulse animation on this https://daneden.github.io/animate.css/

Is this easy to implement? 

2 minutes ago, Thursting said:

Hey Tuan,

Thanks - I also tried altering the transform-origin but it doesn't seem to affect it. 

I have decided to change my design, your hover code influenced me 🙂 I have tweaked the code you originally sent so its a light grey upon hover but i'd like to make the text englarge slightly. Something like the pulse animation on this https://daneden.github.io/animate.css/

Is this easy to implement? 

 display:block;
  width:100px;
  margin: 0 auto;

easy (i guess, just had a quick look, haven't checked it yet), if you know css 😎

@tuanphan Unfortunately I am still a nooby so will need to do some extensive research! Thanks for helping me out, really appreciate it!

figured something out using some other code I had, put them into what you gave me and it seems to work nicely! 

Here's the code:

//HAMBURGER HOVER COLOUR/Enlarge//
a.Mobile-overlay-nav-item:hover {
    color: grey !important;
    transform: scale(1.1);
}

a.Mobile-overlay-nav-item {
    -webkit-transition: all 0.15s ease-in-out !important;
    -moz-transition: all 0.15s ease-in-out !important;
    -o-transition: all 0.15s ease-in-out !important;
    transition: all 0.15s ease-in-out !important;
  }