Thursting Posted November 20, 2019 Share Posted November 20, 2019 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. Link to comment
tuanphan Posted November 21, 2019 Share Posted November 21, 2019 @Thursting Each template will have different class for Hamburger Menu. So can you share link to your site? 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
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 @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 🙂 Link to comment
tuanphan Posted November 26, 2019 Share Posted November 26, 2019 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; } 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
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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! Link to comment
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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%; } } Link to comment
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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! Link to comment
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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. Link to comment
tuanphan Posted November 26, 2019 Share Posted November 26, 2019 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%; } 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
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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? Link to comment
tuanphan Posted November 26, 2019 Share Posted November 26, 2019 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 😎 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
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 @tuanphan Unfortunately I am still a nooby so will need to do some extensive research! Thanks for helping me out, really appreciate it! Link to comment
Thursting Posted November 26, 2019 Author Share Posted November 26, 2019 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; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.