skip to Main Content

I’m pretty new to html and css. I’m trying to create a nav block that contains a nested list. I want it to look like this:

enter image description here

But I cannot get the outer list to stack inline. It ends up looking like this:

enter image description here

What is wrong with this code?

nav a {
  text-decoration: none;
}

nav#bottom {
  background-color: rgb(27, 72, 220);
  color: rgb(211, 211, 212);
  padding: 15px;
}

nav#bottom ul {
  list-style: none;
  list-style-type: none;
  list-style-image: none;
  flex: 0 1 150px;
  align-items: center;
}

nav#bottom ul>li {
  font-size: 1em;
  line-height: 1.8em;
  list-style-type: none;
  list-style: none;
  display: inline;
  align-items: center;
}

nav#bottom ul>li>ul>li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

nav#bottom ul a {
  color: white;
  text-decoration: none;
}
<footer>
  <nav id="bottom">
    <ul>
      <li>
        <ul>
          <li>
            <a href="mailto:[email protected]"><img id="emailIcon" src="./images/emailIcon.png" width="50" alt="email icon" /></a>
          </li>
          <li><a href="mailto:[email protected]">Email me</a></li>
        </ul>
      </li>
      <li>
        <ul>
          <li>
            <a href="www.linkedin.com/in"><img id="linkedin" src="./images/linkedInIcon.png" width="50" alt="linked in icon" /></a>
          </li>
          <li><a href="www.linkedin.com/in">My Linkedin Page</a></li>
        </ul>
      </li>
      <li>
        <ul>
          <li>
            <a href="tel:+1number"><img id="phoneIcon" src="./images/phoneIcon.png" width="50" alt="Phone Icon"></a>
          </li>
          <li><a href="tel:+1number">Call Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</footer>

3

Answers


  1. You do not need to add another unordered list ul inside the list elements li, you can use CSS flexbox to style it. I have modified your codes below, a summary of what I did is:

    • edited your HTML file to remove the unnecessary nesting
    • editing your CSS for nav#bottom ul and nav#bottom ul > li
    • removed the CSS for nav#bottom ul > li > ul > li**

    HTML:

     <footer>
            <nav id="bottom">
                <ul>
                    <li>
                        <a href="mailto:[email protected]"><img id ="emailIcon" src="./images/emailIcon.png" width="50" alt="email icon"/></a>
                        <a href="mailto:[email protected]">Email me</a>
                    </li>
                    <li>
                        <a href="https://www.linkedin.com/in"><img id="linkedin" src="./images/linkedInIcon.png" width="50" alt = "linked in icon" /></a>
                        <a href="https://www.linkedin.com/in">My Linkedin Page</a>
                    </li>
                    <li>
                        <a href="tel:+1number"><img id="phoneIcon" src="./images/phoneIcon.png" width="50" alt="Phone Icon"></a>
                        <a href="tel:+1number">Call Me</a>
                    </li>
                </ul>
            </nav>
        </footer>
    

    CSS:

          nav a {
            text-decoration: none;
          }
    
          nav#bottom {
            background-color: rgb(27, 72, 220);
            color: rgb(211, 211, 212);
            padding: 15px;
          }
    
          nav#bottom ul {
            list-style: none;
            list-style-type: none;
            list-style-image: none;
            flex: 0 1 150px;
            align-items: center;
            display: flex;
            justify-content: space-evenly;
          }
    
          nav#bottom ul > li {
            font-size: 1em;
            line-height: 1.8em;
            list-style-type: none;
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
    
          nav#bottom ul a {
            color: white;
            text-decoration: none;
          }
    

    This will achieve what your desired look✨

    Login or Signup to reply.
  2. You don’t need nested ul and li you can use (flex-direction: row) for larger devices and (flex-direction: column) for mobile devices.

    For Example:

    Larger Device:

    nav#bottom ul {
        list-style: none;
        list-style-type: none;
        list-style-image: none;
        flex: 0 1 150px;
        align-items: center;
        display: flex;
        flex-direction: row; //This behaviour is by default
        justify-content: space-evenly;
    }
    

    Mobile Device:

    @media screen and (max-width: 768px) {
      flex-direction: column;
    }
    
    Login or Signup to reply.
  3. The CSS you’ve written gets pretty convoluted pretty quickly, and with that many layers of styles you’re not likely to get a desirable result on refactor without revising basically the entire file every time for every little change you have to make.

    There’s no need for multiple nested <ul> elements here, as we can imagine each "group" of links as one single node in the <nav>. Because the <a> tags are essentially identical, you can even include the <img> and the link text as children of the same link.

    For example:

    <footer>
      <nav id="bottom">
        <div>
          <ul>
            {/* each li holds one and only one link */}
            <li>
              <a href="mailto:[email protected]">
                {/* img and text merged into one link */}
                <img id="emailIcon" src="./images/emailIcon.png" width="50" alt="email icon" />
                Email me
              </a>
            </li>
            <li>
              <a href="www.linkedin.com/in">
                <img id="linkedin" src="./images/linkedInIcon.png" width="50" alt="linked in icon" />
                My Linkedin Page
              </a>
            </li>
            <li>
              <a href="tel:+1number">
                <img id="phoneIcon" src="./images/phoneIcon.png" width="50" alt="Phone Icon" />
                Call Me
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </footer>
    

    This is lower-level and easier to visualize, which will make it easier to style. Basically all that’s left is to treat the <ul> as a flexbox so that all of its children (the <li> elements) can be displayed inline. The outer <div> exists so that you can contain all of the links to as small an area as you’d like.

    nav#bottom {
      background-color: rgb(27, 72, 220);
      color: rgb(211, 211, 212);
      padding: 15px;
      display: flex;
      justify-content: center;
    
      div {
        text-align: center;
        // width will determine how close each link is to one another
        width: 50%;
      }
    
      ul {
        padding: 0;
        list-style: none;
        display: flex;
        // you can play with space-around and space-between for different effects
        justify-content: space-between;
    
        a {
          color: white;
          text-decoration: none;
        }
    
        img {
          // break image and text to different lines
          display: block;
          // center within li
          margin: 0 auto;
        }
      }
    }
    

    With the above, I get a result almost identical to the goal you set, granted with image alts instead of the original files. Less is definitely more when it comes to HTML/CSS. Generally, the simpler the solution, the cleaner the result. Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search