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

Html – Cannot get navbar on right upper corner of the website

right now Im working on the odin project trying to build a landing page.
My navbar stays on the left side although I want it to be on the right side.
This is my code:

.container{
width:100%;
height:27vh;
background-color: #1f2937;
position:static;
}
.footer{  
position: fixed;
bottom: 0px;
width: 100%;
height: 10vh;
background-color:#1f2937;
color: white;
text-align: center;
justify-content: center;
display: flex;
}

.headerlogo {
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
}
.navbar {
position: fixed;
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
top: -30px;
flex-direction: row;
}  
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
color:white;
text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="navbar">
        <ul> 
            <li><a href="index.html">header link one</a></li>
            <li><a href="index.html">header link two</a></li>
            <li><a href="index.html">header link three</a></li>
        </ul>
        </div>
    </div>
    <div class="footer">
    Copyright © The Odin Project 2021
    </div>
    
</body>
</html>

Ive tried using justify content:space between to get the navbar to the right side and have been sitting on this problem for hours but i cant find a solution, perhaps someone can help me out.

Tags:

3

Answers


  1. 0

    I propose two alternatives

    1. If you want to use display flex, remember that the "parent" html label is who need to have display flex, justify-content, align-items, etc…

    The code would be like this:

    .container {
    width: 100%;
    height: 27vh;
    background-color: #1f2937;
    position: static;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.navbar {
    position: fixed;
}
    1. You can do that with less lines without flex

    The code would be like this:

    .container {
    width: 100%;
    height: 27vh;
    background-color: #1f2937;
    position: static;
}

.navbar {
    position: fixed;
    top: 0;
    right: 0;
}

    I hope this helps you!

    Login or Signup to reply.
  2. 0

    If you want to move the items to the right just do this:

    .navbar {
  position: fixed;
  width: 85%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: -30px;
  flex-direction: row;
}

    I changed to justify-content: space-between; to justify-content: flex-end;

    if you want the item to move to the very right just set the navbar width to 100%:

    Like this:

    .navbar {
  position: fixed;
  width: 100%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: -30px;
  flex-direction: row;
}
    Login or Signup to reply.
  3. 0

    Here is the solution:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 27vh;
  background-color: #1f2937;
  position: static;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 10vh;
  background-color: #1f2937;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  
}

.headerlogo {
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
}

.navbar {
  position: fixed;
  width: 85%;
  top: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  padding-top: 15px;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  color: white;
  text-decoration: none;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="navbar">
      <ul>
        <li><a href="index.html">header link one</a></li>
        <li><a href="index.html">header link two</a></li>
        <li><a href="index.html">header link three</a></li>
      </ul>
    </div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2021
  </div>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search