Home Setting portions of <li> elements in horizontal nav bar to float right with CSS reverses their order

Questions

Setting portions of <li> elements in horizontal nav bar to float right with CSS reverses their order

January 16, 2023

I’m trying to create a basic horizontal navigation bar fixed at the top of the page, with 4 links included. I wanted the last two to be located at the right side of the nav bar with CSS, but I can’t seem to do this without the order of the last 2 links getting reversed. I don’t want to just switch the last 2 <li> elements in the HTML itself, since screen readers would read it in the reverse order.

Here’s the CSS I did:

<stlye>
  * {box-sizing: border-box;
     padding: 0;
     margin: 0;}

  body {font-family: Helvetica, Arial, sans-serif;
        color: #393939;}

  header {font-size: 18px;}
  
  ul.topnav {list-style-type: none;
             margin:0;
             padding-left: 300px;
             padding-right: 300px;
             overflow: hidden;
             background-color: rgba(50, 150, 220, 1);
             position: fixed;
             top: 0;
             width: 100%;}

  ul.topnav li {float: left;}

  ul.topnav li.right {float: right;}

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

  ul.topnav li a:hover {background-color: rgb(200, 200, 200);}

  ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}

  @media screen and (max-width: 600px) {ul.topnav li.right, 
                                        ul.topnav li {float: none;}}

  main {margin-top: 50px;
        height: 1500px;
        text-align: center;
        line-height: 2;}
</style>

And here’s my HTML:

<body>  
    <header>
      <nav>
        <ul class="topnav">
          <li><a class="activetab" href="home">Home</a></li>
          <li><a href="dashboard">Explore</a></li>
          <li class="right"><a href="signup">Login</a></li>
          <li class="right"><a href="login">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Homepage Test</h1>
      <h2>Warning: work in progress</h2>
      <h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
    </main>
</body>

Is there a better/more efficient way of doing this?

I’ve tried using "display: flex;" for the topnav class with the element and "justify-content: flex-end;" in the "right" class for the last two list elements to no avail.

>Solution :

You can wrap the elements on the right in a span or something and set the span to have float: right.

(Use fullscreen for best effect)

* {box-sizing: border-box;
     padding: 0;
     margin: 0;}

  body {font-family: Helvetica, Arial, sans-serif;
        color: #393939;}

  header {font-size: 18px;}
  
  ul.topnav {list-style-type: none;
             margin:0;
             padding-left: 300px;
             padding-right: 300px;
             overflow: hidden;
             background-color: rgba(50, 150, 220, 1);
             position: fixed;
             top: 0;
             width: 100%;}

  ul.topnav li {float: left;}

  ul.topnav span.right {float: right;}

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

  ul.topnav li a:hover {background-color: rgb(200, 200, 200);}

  ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}

  @media screen and (max-width: 600px) {ul.topnav li.right, 
                                        ul.topnav li {float: none;}}

  main {margin-top: 50px;
        height: 1500px;
        text-align: center;
        line-height: 2;}

<body>  
    <header>
      <nav>
        <ul class="topnav">
          <li><a class="activetab" href="home">Home</a></li>
          <li><a href="dashboard">Explore</a></li>
          <span class="right">
            <li><a href="signup">Login</a></li>
            <li><a href="login">Contact</a></li>
          </span>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Homepage Test</h1>
      <h2>Warning: work in progress</h2>
      <h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
    </main>
</body>