How to set underline on hover on navigation links on responsive menu?

Question

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.

Here's the site , or you can refer to the below snippet.

Any help is appreciated.

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar a.icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive a { float; none; display: block; text-align: center; } .navbar.responsive { display: block; } .navbar.responsive a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } p { margin: 10px 0; } 

 <div class="navbar" id="myNavbar"> <a href="#about" class="active">About</a> <a href="#lindsay">Lindsay</a> <a href="#contact">Branding</a> <a href="#contact">Photography</a> <a href="#contact">Instagram</a> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> </div> 

Answer 1

I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div , and pass it the property of display:block

this is the example using that I said

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; margin: 0; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar li{ list-style:none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a{ display: none; padding-top: 6px; } .navbar .icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive li a { float; none; display: inline; text-align: center; margin: 4px; } .navbar.responsive li { float; none; text-align: center; margin: 6px 00px; } .navbar.responsive { align-content: center; flex-flow:column; } .navbar.responsive li a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive li a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } 

 <ul class="navbar" id="myNavbar"> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> <li><a href="#about" class="active">About</a></li> <li><a href="#lindsay">Lindsay</a></li> <li><a href="#contact">Branding</a></li> <li><a href="#contact">Photography</a></li> <li><a href="#contact">Instagram</a></li> </ul> 

Answer 2

Are you expecting like this

Temporary Solution

I have just added nth-child and given scaling for each link.

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar a.icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive a { float; none; display: block; text-align: center; } .navbar.responsive { display: block; } .navbar.responsive a:before { content: ""; position: absolute; height: 2px; width:100%; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive a:hover:nth-child(1):before { visibility: visible; -webkit-transform: scaleX(.18); transform: scaleX(.18); } .navbar.responsive a:hover:nth-child(2):before { visibility: visible; -webkit-transform: scaleX(.22); transform: scaleX(.22); } .navbar.responsive a:hover:nth-child(3):before { visibility: visible; -webkit-transform: scaleX(.25); transform: scaleX(.25); } .navbar.responsive a:hover:nth-child(4):before { visibility: visible; -webkit-transform: scaleX(.33); transform: scaleX(.33); } .navbar.responsive a:hover:nth-child(5):before { visibility: visible; -webkit-transform: scaleX(.26); transform: scaleX(.26); } } p { margin: 10px 0; } 

 <div class="navbar" id="myNavbar"> <a href="#about" class="active">About</a> <a href="#lindsay">Lindsay</a> <a href="#contact">Branding</a> <a href="#contact">Photography</a> <a href="#contact">Instagram</a> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> </div> 

---