Jump to content

Changed underline color of header menu, but mobile version has issues

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi,

web: https://ellipse-teal-dl5w.squarespace.com/
pass: 2

 i found this code provided by @tuanphan to achieve a custom color on the underline header menu selection, which works great:

header_underline1.thumb.jpg.3d1bbf7729811d5839b9bf962ddefd84.jpg

Here's the code i'm using:

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

works great for desktop header, but when its mobile this happens:

black line is back for current page:
mobile_undeline1.thumb.jpg.43b20f984128971c0a61f96e2d6662f6.jpg

blue line only appears on hover over and its too thin and close to the text, unlike on header which is perfect

mobile_undeline2.thumb.jpg.4aa018e47c26a1bbdced7ae87f8c60e2.jpg

desired outcome for mobile menu: 
1. more padding under text like on header
2. black line gone like on header
3. thicker line that is width of text like on header
mobile_undeline3.thumb.jpg.75f9e197744cbdd68a27da56d3c23ee5.jpg

The code i have there is so close but needs adjustments to make the header desktop and header mobile look the same.



Cheers
 

Link to comment
  • Solution
59 minutes ago, MAC1 said:

Hi,

web: https://ellipse-teal-dl5w.squarespace.com/
pass: 2

 i found this code provided by @tuanphan to achieve a custom color on the underline header menu selection, which works great:

header_underline1.thumb.jpg.3d1bbf7729811d5839b9bf962ddefd84.jpg

Here's the code i'm using:

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

works great for desktop header, but when its mobile this happens:

black line is back for current page:
mobile_undeline1.thumb.jpg.43b20f984128971c0a61f96e2d6662f6.jpg

blue line only appears on hover over and its too thin and close to the text, unlike on header which is perfect

mobile_undeline2.thumb.jpg.4aa018e47c26a1bbdced7ae87f8c60e2.jpg

desired outcome for mobile menu: 
1. more padding under text like on header
2. black line gone like on header
3. thicker line that is width of text like on header
mobile_undeline3.thumb.jpg.75f9e197744cbdd68a27da56d3c23ee5.jpg

The code i have there is so close but needs adjustments to make the header desktop and header mobile look the same.



Cheers
 

 

Please add this code on Custom CSS panel

@media screen and (max-width:767px) {
  .header-menu {
    .header-menu-nav-item a{
      display: inline-block !important;
      .header-menu-nav-item-content {
        background: none !important;
      }
    }
    .header-menu-nav-item--active a::after {
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
}

 

Screenshot_151.png

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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

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.