Why does my HTML Navbar flip when I insert the float:right property?

Kidsteachkids
May 11, 2023
268 views
0 votes
2 Answers

I have an HTML Navbar, and I want to shift all the elements in the navbar to the right. Below, I have attempted to use float: right; to do so. Although this does move everything to the right, it flips the entire navbar (so that elements that were originally in the left are now on the right, and vice versa). I have attached the code below. Why is it doing this?

 <!DOCTYPE html>
 <html>

   <head>
     <style>
       ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
         background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
       }

       li {
         float: right;
         border-right: 1px solid #000;
       }


       li a {
         display: block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;

       }

       li a,
       .dropbtn {
         display: inline-block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;

       }

       li.dropdown {
         display: inline-block;
       }

       .dropdown-content {
         display: none;
         position: absolute;
         background-color: rgb(95, 161, 6);
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index: 1;
       }

       .dropdown-content a {
         color: white;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
       }

       .dropdown-content a:hover {
         background-color: #f1f1f1;
       }

       .dropdown:hover .dropdown-content {
         display: block;
       }

       li a:hover:not(.active) {
         background-color: rgb(0, 90, 0);
       }

       .active {
         background-color: #04AA6D;
       }

       @media screen and (max-width: 600px) {
         ul li {
           border-right: none;
         }

         ul li {
           float: none;
         }
       }

     </style>
   </head>

   <body>
     <ul>
       <li><a href="#"><i class="fa fa-fw fa-home"></i></a></li>
       <li><a href="#">Member <i class="fa fa-fw fa-home"></i></a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Manual</a></li>
       <li><a href="#">Forums</a></li>
       <li class="dropdown">
         <a href="#" class="dropbtn">Hello there</a>
         <div class="dropdown-content">
           <a href="#">Settings</a>
           <a href="#">Notifications</a>
           <a href="#">Log out</a>
         </div>
       </li>
     </ul>
   </body>

 </html>

Answers

I have added some display: block, width: 100% and text-align: right and it works (important to make the link full width for improve the user experience)

But, I would recommend to use flex layout to achieve this kind of layouts, and use a mobile first apprach, that meands that your media queryes are defined with min-width to design from small to large screens

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good luck!

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(rgb(83,152,42), rgb(51,110,14));
}

li {
  float: right;
  border-right:1px solid #000;
}


li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(95,161,6);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

li a:hover:not(.active) {
  background-color: rgb(0, 90, 0);
}

.active {
  background-color: #04AA6D;
}

/** here are the modifications */
@media screen and (max-width: 600px) {
  ul li { border-right: none; width: 100% }
  ul li { float: none; }
  ul li a { display: block; text-align: right; }
  li a, .dropbtn { text-align: right; display: block; }
}

<ul>
  <li><a href="#"><i class="fa fa-fw fa-home"></i></a></li>
  <li><a href="#">Member <i class="fa fa-fw fa-home"></i></a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Manual</a></li>
  <li><a href="#">Forums</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Hello there</a>
    <div class="dropdown-content">
      <a href="#">Settings</a>
      <a href="#">Notifications</a>
      <a href="#">Log out</a>
    </div>
  </li>
</ul>

You can use display display: flex and justify-content: flex-end on parent ul to align to the end on current order.

ul {
 display: flex;
 justify-content: flex-end;
}

Example:

 <!DOCTYPE html>
 <html>

   <head>
     <style>
       ul {
         display: flex;
         justify-content: flex-end;
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
         background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
       }

       li {
         /* float: right; */
         border-right: 1px solid #000;
       }


       li a {
         display: block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;

       }

       li a,
       .dropbtn {
         display: inline-block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;

       }

       li.dropdown {
         display: inline-block;
       }

       .dropdown-content {
         display: none;
         position: absolute;
         background-color: rgb(95, 161, 6);
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index: 1;
       }

       .dropdown-content a {
         color: white;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
       }

       .dropdown-content a:hover {
         background-color: #f1f1f1;
       }

       .dropdown:hover .dropdown-content {
         display: block;
       }

       li a:hover:not(.active) {
         background-color: rgb(0, 90, 0);
       }

       .active {
         background-color: #04AA6D;
       }

       @media screen and (max-width: 600px) {
         ul li {
           border-right: none;
         }

         ul li {
           float: none;
         }
       }

     </style>
   </head>

   <body>
     <ul>
       <li><a href="#">Home<i class="fa fa-fw fa-home"></i></a></li>
       <li><a href="#">Member <i class="fa fa-fw fa-home"></i></a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Manual</a></li>
       <li><a href="#">Forums</a></li>
       <li class="dropdown">
         <a href="#" class="dropbtn">Hello there</a>
         <div class="dropdown-content">
           <a href="#">Settings</a>
           <a href="#">Notifications</a>
           <a href="#">Log out</a>
         </div>
       </li>
     </ul>
   </body>

 </html>

Please signup or login to give your own answer.

Click here to cancel reply.