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

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

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

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

Check out on the mobile version and let me know if you're able to view what I'm talking about. Thanks! 

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/

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

Thanks @melody495, I'll give it a try!