Using justify-content to space menu items evenly

Explorer ,
Jun 18, 2022 Jun 18, 2022

Copy link to clipboard

Copied

Hi Guys,

 

I've been trying to use justify-content to space my menu items evenly without success currently they display with space between them but the first and last tems have no space in front or behind respectly.  I would like them to be evenly spaced with space in front and behibd the first and last so they sit nicely within the header/nav borders.  I've tried placing the code at different locations but the width 100% overrides.  When I remove it and do the same nothing happens.  Any help you can provide is appreciated.   Also any thoughts you have that could simplify the code are appreciated. 

 

<!DOCTYPE html>
<html lang="en" class="other">
<head>
<meta charset="UTF-8">
<title>CodePen - CSS tab menu v1</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
  <div id="navigation">
    <ul id="mainMenu">
      <li class="home"><a href="#">
        <div class="icons"><span></span></div>
        Home</a></li>
      <li><a href="#">
        <div class="icons"><span></span></div>
        Products</a></li>
      <li><a href="#">
        <div class="icons"><span></span></div>
        Services</a></li>
      <li><a href="#">
        <div class="icons"><span></span></div>
        MENU 3</a></li>
      <li><a href="#">
        <div class="icons"><span></span></div>
        MENU 4</a></li>
      <li><a href="#">
        <div class="icons"><span></span></div>
        Contact Us</a></li>
    </ul>
  </div>
</nav>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Didact Gothic", sans-serif;
  position: relative;
}
a {
  text-decoration: none;
}
a, img {
  outline: none;
}
#navigation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 1vw;
}
#navigation * {
  transition: all 0.4s;
}
ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  list-style: none;
  display: flex;
}
ul li {
  flex: 1;
  background-color: #3E6EB6;
  border-radius: 10px;
  color: #FCF9F4;
  margin: 10px;
}
ul a {
  padding: 1em;
  display: block;
  color: #FCF9F4;
}
ul a:hover {
  background-color: #000080;
  border-radius: 10px;
}
ul ul {
  padding-top: 6em;
  height: 0;
  overflow: hidden;
  opacity: 0;
  display: none;
}
ul ul::before {
  position: absolute;
  left: 50%;
  top: 5.25em;
  margin-left: -0.6em;
  width: 1.4em;
  height: 1.4em;
  background-color: #000080;
  border-radius: 10px;
  content: "";
  transform: rotate(-45deg);
}
#navigation ul ul li {
  position: relative;
  width: 100%;
  display: none;
  background-color: #000080;
  border-radius: 10px;
}
ul ul li:nth-child(1) {
  font-size: 0;
  line-height: 0;
  height: 4px;
  display: block;
}
ul ul li:nth-child(even) {
  background-color: #000080;
  border-radius: 10px;
}
ul li.home:hover, ul ul li {
  background-color: #000080;
  border-radius: 10px;
}
ul ul a:hover {
  background-color: #3E6EB6;
  border-radius: 10px;
}
ul li:hover > ul {
  height: auto;
  opacity: 1;
}
.icons {
  position: relative;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  display: block;
}
/*------------------------------
- TOP DOWN - ( PC -> Mobile )
------------------------------*/
@media screen and (max-width: 768px) {
  /* - Mobile Landscape & Tablet Portrait */
  #navigation ul li:nth-child(6) {
    display: none;
  }
  #navigation ul ul {
    display: block;
  }
  #navigation ul ul li:nth-child(6) {
    display: block;
  }
} /* /- Mobile Landscape & Tablet portrait */
@media screen and (max-width: 768px) and (orientation: landscape) {
  /* Mobile Landscape */
} /* /Mobile Landscape */
@media screen and (max-width: 560px) {
  #navigation ul li {
    width: 20%;
  }
  #navigation ul li:nth-child(5) {
    display: none;
  }
  #navigation ul li.home {
    width: 20%;
  }
  #navigation ul ul li:nth-child(5) {
    display: block;
  }
}
@media screen and (max-width: 440px) {
  #navigation ul li {
    width: 25%;
  }
  #navigation ul li:nth-child(4) {
    display: none;
  }
  #navigation ul ul li:nth-child(4) {
    display: block;
  }
}
@media screen and (max-width: 414px) {
  /* Mobile L Portrait */
} /* /Mobile L Portrait */
@media screen and (max-width: 360px) {
  #navigation ul li {
    width: 28%;
  }
}

 

Views

46

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 18, 2022 Jun 18, 2022

Copy link to clipboard

Copied

 

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

<head>
    <meta charset="UTF-8">
    <title>CodePen - CSS tab menu v1</title>
    <link rel="stylesheet" href="./style.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Didact Gothic", sans-serif;
            position: relative;
        }
        a {
            text-decoration: none;
            outline: none;
        }
        #navigation {
            width: 90%;
            margin-left: 5%;
        }
        #navigation * {
            transition: all 0.4s;
        }
        ul {
            width: 100%;
            text-align: center;
            list-style: none;
            display: flex;
        }
        ul li {
            flex: 1;
            background-color: #3E6EB6;
            border-radius: 10px;
            color: #FCF9F4;
            margin: 10px;
        }
        ul a {
            padding: 1em;
            display: block;
            color: #FCF9F4;
            border-radius: 10px;
        }
        ul a:hover {
            background-color: #000080;
        }
        #navigation ul li:nth-child(n+4) {
            display: none;
        }
        @media screen and (min-width: 720px) {
            #navigation ul li:nth-child(4) {
                display: block;
            }
        }
        @media screen and (min-width: 992px) {
            #navigation ul li:nth-child(5) {
                display: block;
            }        
        }
        @media screen and (min-width: 1140px) {
            #navigation ul li:nth-child(6) {
                display: block;
            }
        }
    </style>
</head>

<body>
    <nav id="navigation">
        <ul class="mainMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">MENU 3</a></li>
            <li><a href="#">MENU 4</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</body>
</html>

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 19, 2022 Jun 19, 2022

Copy link to clipboard

Copied

LATEST

You can see what Ben has done for you here:
https://codepen.io/TheNexus_00/pen/JjpVVBm

The problem with the sollution is not really good for mobile responsive. Hiding menu items on shrinking of the sites width for a nav is not really the way. Knowing the cut off, shortning spacing and size initially and leading to a mobile navigation there after is what you would look to be doing.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines