Reputation: 1612

I am trying to evenly space the links across my navigation bar

I am trying to evenly space the links to my website across my navigation bar. I'm having trouble with the last link because it is a dropdown, separate from my other links. I was able to evenly separate my non-dropdown links across the navigation bar by adding width: 25% to.navbar a in my CSS stylesheet. I tried adding width: 25% to .dropdown by that didn't do it. I also tried adding it to .dropdown .dropbtn but that didn't do either.

Here is an example of my HTML layout:

/* Navbar container */
 .navbar {
    overflow: hidden;
    background-color: #272424;
    font-family: Arial;
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font: Arial;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 25%;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    width: 100%;
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #81A3A7;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Name</title>
	<link rel="stylesheet" href="index.css">
</head>

	<body>		
		<div class="navbar">
			<nav>
				<a href=index.html>About</a>
				<a href=projects.html>Projects</a>
				<a href=publications.html>Publications</a>
				<div class="dropdown">
					<button class="dropbtn">Writing
					</button>
					<div class="dropdown-content">
					  <a href="why_writing.html">Why Write?</a>
					  <a href="dollops.html">Dollops</a>
					  <a href="longforms.html">Longforms</a>
					  <a href="technical_science.html">Technical/Science</a>
					  <a href="quotes.html">Quotes</a>
					  <a href="words.html">Words</a>
					  <a href="notes.html">Notes</a>
					</div>
				</div>	
			</nav>
		</div>
		<header>
			<h1>Why Write?</h1>
		</header>
		<p>Coming soon!</p>
	</body>
</html>

Here are pictures showing the problem:

This is what I want:

This is not right:

Upvotes: 0

Answers (4)

Amarjit Singh

Reputation: 1192

I have done some changes according to your requirement, please check.

/* Navbar container */
*{
  box-sizing: border-box;
}
 .navbar {
    overflow: hidden;
    background-color: #272424;
    font-family: Arial;
  }

  /* Links inside the navbar */
  .navbar a {
    float: left;
    font: Arial;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 25%;
  }

  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    width: 25%;
  }

  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    width: 100%;
  }

  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #81A3A7;
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  /* Links inside the dropdown */
  .navbar .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    width:auto;
  }

  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Name</title>
    <link rel="stylesheet" href="index.css">
</head>

    <body>      
        <div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>
        <header>
            <h1>Why Write?</h1>
        </header>
        <p>Coming soon!</p>
    </body>
</html>

Upvotes: 0

Pritesh Bhoi

Reputation: 1096

Welcome! Just add width:25% in div.dropdown and your Dropdown takes the same width as other links.

Upvotes: 1

Sandeep

Reputation: 550

everything is right just you can add width:25%; in your dropdown CSS

.dropdown {
    float: left;
    overflow: hidden;
   width: 25%;
}

Upvotes: 0

Vladimir

Reputation: 11

You have padding in your <a> Remove padding or make it a part of a width calculation

* {box-sizing: border-box;}

Upvotes: 0

I am trying to evenly space the links across my navigation bar

Answers (4)

Related Questions