Html - How to make nav link box color fill whole space

user25509231
June 11, 2024
106 views
3 votes
3 Answers

I have NavBar Links on the top right of my website and they have a white fill when active and when hovering over them but the white fill is only surrounding the words and I want to know how to adjust how large the white space is.

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  padding: 10px;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: white;
  color: black;
  border: 10px;
}

.topnav a.active {
  background-color: white;
  color: black;
  width: 100px;
}

<div class="header">
  <h1>Redacted</h1>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="resume.html">Resume</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

I want the buttons to have a large fill instead of mainly just around the text.

Tags: css html

Answers

You can modify the padding of the <a> elements within your .topnav.

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  padding: 10px;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 25px; 
  text-decoration: none;
  font-size: 17px;
  display: inline-block; 
  box-sizing: border-box; 
}

.topnav a:hover, .topnav a.active {
  background-color: white;
  color: black;
}

<div class="header">
  <h1>Redacted</h1>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="resume.html">Resume</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

You can apply padding-left and padding-right to the active and hovered elements:

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  padding: 10px;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover, .topnav a.active {
  background-color: white;
  color: black;
  border: 10px;
  padding-left: 50px;
  padding-right: 50px;
}

<div class="header">
  <h1>Redacted</h1>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="resume.html">Resume</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

You can add the below Style code to your CSS File.

Hope, It will be works for you.

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {  
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.header h1 {
  padding: .2rem 2rem;
  color: white;
  text-decoration: none;
  overflow: hidden;
}

.topnav {
  overflow: hidden;
  display: flex;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav a:hover,
.topnav a.active {
  background-color: white;
  color: black;
}

<div class="header">
  <h1>Redacted</h1>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="resume.html">Resume</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make nav link box color fill whole space

Answers