How to align navbar items to right ?

[nixsbg]

I'm using a responsive navigation bar from here:

https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

My question is how to align navbar items to right ?

I tried to change float from left to right, but then the whole arrangement of items changes. Where am I wrong ?

Thanks.

[Ingolme]

Here are some tweaks I made to the CSS to get it to align to the right.

You just need to replace the existing .topnav, .topnav a and .dropdown rules with these ones:

.topnav {
  text-align: right;
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  display: inline-block;
  vertical-align: middle;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.dropdown {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

 

[nixsbg]

It's much better now. Thanks.

[janiceadeltoro]

To align navbar items to the right, you can use CSS styling. Here's an example of how you can achieve this:

HTML:

<nav>
  <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: right;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: #000;
}

In the above example, the float: right; property is applied to the list items (<li>) within the navbar. This will align the items to the right side. Adjust the CSS properties such as padding, margin, and color according to your design requirements.

Note: This is a basic example, and you may need to modify the CSS to match your specific navbar implementation.