Jump to content

Color code and underline for nav menu options: worked for desktop and need resolve to mobile version

Recommended Posts

I successfully pulled code from a post I found in this forum and it accomplished what i wanted to do on my website (desktop version). I wanted to place an underline, color specific, onto the nav menu options. The code worked yet when I go into the mobile version of my website the lines are way too long. Below I'm going to include the code I used.... is there anyone who can give me direction on how to code the mobile version to work as I would like it to? Thanks!

 

/* Change the underline color of the top menu links */
.header-nav-item a {
  position: relative;
  text-decoration: none !important;
color: #43c6ff; /*   Set the color of the link */
}

.header-nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjust the positioning of the underline */
  width: 100%;
  height: 2px; /* Adjust the height of the underline */
  background-color: #43c6ff; /* Set the color of the underline */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s;
}

.header-nav-item a:hover::after,
.header-nav-item a:focus::after,
.header-nav-item--active a::after {
  visibility: visible;
  opacity: 1;
}

/* Optional: Change the underline color when the link is active or focused */
.header-nav-item--active a::after {
  background-color: #43c6ff; /* Set the color of the underline when the link is active */
}
div.header-nav-item a {
    display: inline-block;
}
div.header-menu-nav-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #43c6ff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s;
}
div.header-menu-nav-item a:hover::after {
    visibility: visible;
    opacity: 1;
}
.header-menu-nav-item-content {
    position: relative;
    display: inline-block;
    pointer-events: none;
}
Link to comment
  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Hi, without your website it's hard to see what you are trying to achieve. but try adding this to your custom css?

@media only screen and (max-width:640px) {
	.header-nav-item a::after {
		width: 50% !important; // set number to what you need
	}

	div.header-menu-nav-item a::after {
		width: 50% !important; // set number to what you need	
	}
}

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Custom Code help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
  • 2 weeks later...
17 hours ago, BrockDB said:

@melody495 Can you see my site? www.brockbyersphotogrpahy.com

Hi, the link doesn't work, maybe a typo?

Edit: got it. https://www.brockbyersphotography.com/

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Custom Code help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment

Hi, not sure this is the exact code that is on your website, as the colour references are all blue, not orange. Try to replace with the below code. I added .header-menu-nav-item-content, used after on this selector rather than the a. Because the a is spanning the full width of the screen, that's why the line was long. 

Try and let me know how it goes.

Replace this line

div.header-menu-nav-item a::after {

with this line (1st line)

// mobile menu nav item
div.header-menu-nav-item a .header-menu-nav-item-content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #43c6ff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s;
}

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Custom Code help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.