skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search