HTML Navigation bar adaptive padding

Question

I'm creating a website using HTML and CSS and I made a navigation bar to move around the website.

However, I'm having a problem with the padding on the navbar. I have it set so that whenever you hover your cursor over an option on the navbar the text becomes bold and the background colour changes. However, whenever the cursor hovers over the text, it becomes bold and the text spreads out. Is there a way that I could make the padding change when the mouse hovers over the text so that when the text becomes bold it doesn't move the other items on the navbar?

My code (I used the tag to make the option for the current page bold):

<DOCTYPE html>
    <head>
    <style>
        .topnav {
        overflow: hidden;
        background-color: black;
        }

        .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        }

        .topnav a:hover {
        background-color: #2222
        color: white;
        font-weight: 700;
        }
    </style>
    </head>
        <div class="topnav">
        <b><a href="\index.html">Home</a></b>
        <a href="\ComingSoon\index.html">Coming Soon</a>
        <a href="\VideoLibrary\index.html">Video Library</a>
        <a href="\CastAndCrew\index.html">Cast and Crew</a>
        </div>
    //rest of body code
    </body>
    </html>

score 0 · Accepted Answer · answered Oct 25 '21 at 12:52

This is a trick using CSS pseudo-element and attribute

.topnav {
  overflow: hidden;
  background-color: black;
  display:flex;
}

.topnav a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:first-child{
  font-weight: 700;
}

.topnav a:hover {
  background-color: #222;
  font-weight: 700;
}

.topnav a:before {
  display: block;
  content: attr(data-title);
  font-weight: 700;
  overflow: hidden;
  visibility: hidden;
  height: 0;   
}

<div class="topnav">
  <a data-title="Home" href="\index.html">Home</a>
  <a data-title="Coming Soon" href="\ComingSoon\index.html">Coming Soon</a>
  <a data-title="Video Library" href="\VideoLibrary\index.html">Video Library</a>
  <a data-title="Cast and Crew" href="\CastAndCrew\index.html">Cast and Crew</a>
</div>

HTML Navigation bar adaptive padding

1 Answers1