Css - space-evenly not working in my flexbox menu

Alan
September 1, 2024
114 views
1 vote
2 Answers

I’m trying to get my menu to space out evenly. It seems to be stuck in the middle and not expanding into free space on either side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>

    <style>

      .navMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 7px;
        background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black);        
      }

      .navMenu ul{
        list-style: none;
        background-color: blue;
        margin: 0;
        padding-left: 2%;
      }

      ul li{
        display: inline-block;
        position: relative;
      }

      ul li a{
        display: block;
        padding: 4px 1dvw;
        color: white;
        text-decoration: none;
        font-size: 1.1em;
      }

      ul li ul.dropdown li{
        display: block;
        padding: 8px;
      }

      ul li ul.dropdown{
        position: absolute;
        z-index: 999;
        display:none;
      }

      ul li a:hover{
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
      }

      ul li:hover ul.dropdown{
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    </style>    

  </head>  

  <body>

    <nav class="navMenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Teams</a>
          <ul class="dropdown">
            <li><a href="#">Cubs</a></li>
            <li><a href="#">Braves</a></li>
          </ul>
        </li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
    </nav>

  </body>

</html>

I’ve tried space-evenly, space-around, space-between, etc. Nothing works as I think it should.

Tags: css flexbox

Answers

The problem you are having is because the ‘ul’ inside the container ‘.navMenu’ has a background color and padding, hence the flexbox isn’t laying out items the way it should.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>

    <style>

      .navMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 7px;
        background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black);        
      }

      .navMenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex: 1;
      }

      ul li{
        display: inline-block;
        position: relative;
        flex: 1;
      }

      ul li a{
        display: block;
        padding: 4px 1vw;
        color: white;
        text-decoration: none;
        font-size: 1.1em;
        text-align: center;
      }

      ul li ul.dropdown li{
        display: block;
        padding: 8px;
      }

      ul li ul.dropdown{
        position: absolute;
        z-index: 999;
        display:none;
      }

      ul li a:hover{
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
      }

      ul li:hover ul.dropdown{
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    </style>    

  </head>  

  <body>

    <nav class="navMenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Teams</a>
          <ul class="dropdown">
            <li><a href="#">Cubs</a></li>
            <li><a href="#">Braves</a></li>
          </ul>
        </li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </body>

</html>

There are a couple of small problems in your code.

The first ul isn’t closed explicitly but more importantly the flex is on the parent of the first ul (the navbar) rather than on the ul itself.

As it stands, the flex has only one item as a child and it centers it.

If you put the flex on the ul then it will have spece between its items.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing</title>

  <style>
    .navMenu {
      padding: 7px;
      background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), black);
    }
    
    .navMenu ul {
      list-style: none;
      background-color: blue;
      margin: 0;
      padding-left: 2%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
    
    ul li {
      display: inline-block;
      position: relative;
    }
    
    ul li a {
      display: block;
      padding: 4px 1dvw;
      color: white;
      text-decoration: none;
      font-size: 1.1em;
    }
    
    ul li ul.dropdown li {
      display: block;
      padding: 8px;
    }
    
    ul li ul.dropdown {
      position: absolute;
      z-index: 999;
      display: none;
    }
    
    ul li a:hover {
      box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
    }
    
    ul li:hover ul.dropdown {
      display: flex;
      flex-direction: column;
      padding: 0;
    }
  </style>

</head>

<body>

  <nav class="navMenu">
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Teams</a>
        <ul class="dropdown">
          <li><a href="#">Cubs</a></li>
          <li><a href="#">Braves</a></li>
        </ul>
      </li>
      <li><a href="#">Coaches</a></li>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>

</html>

I guess you will want to sort out whether the linear gradient on the navbar is what you want seen as at the moment the ul covers it so the background is a plain blue.

Please signup or login to give your own answer.

Click here to cancel reply.

Css – space-evenly not working in my flexbox menu

Answers