How can I make my webpage icon stay right?

Question

I have made a navbar, and it is supposed to replace the links with a menu icon on the right when the webpage gets below 630px wide. The problem is, my icon doesn't stay right, it stays as far left as it can go, leaving space for the margins of the hidden links (the elements themselves are gone - I set them to display: none; - but the margins are still there). I am working with the w3 schools article about responsive navbars, but only using it for the appearing icon part.

I have tried to change he display of the icon to flex, and all sorts of justification and alignment, but nothing will work. When it is set to flex it's width goes to 0 and I cant make it get wider again.

I am trying to give only the relevant code, but there is a fair amount of stuff I didn't include so feel free to ask me for more or to specify something.

.navContainer {
  position: sticky;
  top: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: left;
  align-content: flex-start;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.navContainer li {
  list-style: none;
  margin-right: 40px;
}

.navContainer a {
  text-decoration: none;
  color: black;
  font-family: Montserrat-Regular;
  font-size: 20pt;
  margin: 10px;
}

.navContainer .icon {
  display: none;
  margin: 0;
}

.navContainer .iconImg {
  max-height: 40px;
  max-width: 40px;
}

@media (max-width: 630px) {
  .navContainer a:not(.logoContainer, .name) {
    display: none;
  }
  .navContainer li.icon {
    float: right;
    display: block;
  }
}

<ul class="navContainer">
  <li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80"></img>
  </li>
  <li><a href="TriTech-Home.html" class="name">TriTech</a></li>
  <li><a class="link1" href="#">xDesk</a></li>
  <li><a class="link2" href="#">Saturn Bikes</a></li>
  <li href="javascript:void(0);" class="icon" onclick="myFunction()">
    <img class="iconImg" src="Menu-Bars.ico">
  </li>
</ul>

Image elements don't have href attributes. Neither do list items. — isherwood, Nov 09 '21 at 15:32

score 0 · Answer 1 · answered Nov 09 '21 at 15:32

0

This should work

.nav-container .icon{
    width: 100%;
    text-align: end;
    }

answered Nov 09 '21 at 15:32

yih613

239
1
10

score 0 · Accepted Answer · answered Nov 09 '21 at 15:39

Don't float things. That's an outdated method, especially with flexbox. Use auto left margin on the last item.

.navContainer {
  position: sticky;
  top: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: left;
  align-content: flex-start;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.navContainer li {
  list-style: none;
  margin-right: 40px;
}

.navContainer a {
  text-decoration: none;
  color: black;
  font-family: Montserrat-Regular;
  font-size: 20pt;
  margin: 10px;
}

.navContainer .icon {
  display: none;
  margin: 0;
}

.navContainer .iconImg {
  max-height: 40px;
  max-width: 40px;
}

@media (max-width: 2630px) { /* increased for demo */
  .navContainer a:not(.logoContainer, .name) {
    display: none;
  }
  .navContainer li.icon {
    display: inline-block;
    margin-left: auto; /* <-------------------- HERE */
  }
}

<ul class="navContainer">
  <li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80" />
  </li>
  <li><a href="TriTech-Home.html" class="name">TriTech</a></li>
  <li><a class="link1" href="#">xDesk</a></li>
  <li><a class="link2" href="#">Saturn Bikes</a></li>
  <li href="javascript:void(0);" class="icon" onclick="myFunction()">
    <img class="iconImg" src="https://via.placeholder.com/40">
  </li>
</ul>

How can I make my webpage icon stay right?

2 Answers2