Question 345718 in Html Question posted in
Some basic documentation can be found here.

Html – How can I move a nav menu to the right side of the page?

I want to do this

I tried adding float: right and margin-right: 0 to .links but it didn’t work.

Here I have a div with class .links. How do I make it render on the right side.

.navbar {
  padding: 5px;
  background: white;
  display: flex;
  justify-content: space-between;
}

.ls,
.rs {
  display: flex;
  align-items: center;
}

.links {
  background: white;
  position: absolute;
  padding: 5px;
}

.links ul {
  list-style-type: none;
  padding: 0;
}

.links ul li a {
  display: inline-block;
  float: right;
  padding: 10px;
}
<header>
  <div class="navbar">
    <div class="ls">
      <a href=""><img src="https://via.placeholder.com/50" height="40px"></a>
      <a href="">Name</a>
    </div>
    
    <div class="rs">
      <a href="">Menu</a>
    </div>
  </div>
  
  <nav class="links">
    <ul>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
    </ul>
  </nav>
</header>
Tags:

3

Answers


  1. 0

    You can set the property right: 0 on the .links class to move it to the far right.

    Here is some really useful documentation on how the right property behaves in a number of scenarios.

    .navbar {
  padding: 5px;
  background: white;
  display: flex;
  justify-content: space-between;
}

.ls, .rs{
  display: flex;
  align-items: center;
}

.links {
  background: white;
  position: absolute;
  right: 0;
  padding: 5px;
}

.links ul{
  list-style-type: none;
  padding: 0;
}

.links ul li a{
  display: inline-block;
  float: right;
  padding: 10px;
}
    <header>
  <div class="navbar">
    <div class="ls">
      <a href=""><img src="logo.svg" height="40px"></a>
      <a href="">Name</a>
    </div>
    <div class="rs">
      <a href="">Menu</a>
    </div>
  </div>
  <nav class="links">
    <ul>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
      <li><a href="">Content</a></li>
    </ul>
  </nav>
</header>
    Login or Signup to reply.
  2. 0

    If the previous answers didn’t work for you, you could still use a framework like bootstrap and force place it to the right using containers and columns.
    bootstrap docs on grid system

    Login or Signup to reply.
  3. 0

    I would also try flexbox.
    Under this link, you can find everything you need to know on how they work, it is a really useful tutorial:

    A guide to flexbox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search