Having trouble getting the navigation bar to appear in the upper right corner of the website

Currently, I am working on The Odin Project and trying to create a landing page. I have encountered an issue where my navbar is positioned on the left side when I want it to be on the right side. Here is the code I am using:

.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>  

I have attempted using justify-content: space-between to move the navbar to the right side, but I have been stuck on this problem for hours without finding a solution. Any help would be greatly appreciated.

Answer №1

Here are two options for you to consider:

  1. If you opt for using display flex, remember that the parent HTML element should have the display flex, justify-content, align-items properties.

The code would look 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. Alternatively, you can achieve the same result with fewer lines of code without using flex.

The code would be as follows:

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

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

I hope these suggestions are helpful to you!

Answer №2

To shift the items to the right, simply follow these steps:

.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 modified justify-content: space-between; to justify-content: flex-end;

If you want the item to be positioned all the way to the right, adjust the navbar width to 100%:

Like so:

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

Answer №3

Here is the provided 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>
  <mate name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="navbar">
      <ul>
        <li><a href="index.html">Link One</a></li>
        <li><a href="index.html">Link Two</a></li>
        <li><a href="index.html">Link Three</a></li>
      </ul>
    </div>
  </div>
  <div class="footer">
    Copyright © My Company 2022
  </div>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Exploring the use of JavaScript attributes within HTML elements: <input type="button" onclick="somceFunc()" /> <input type="button" onclick="somceFunc();" /> <input type="button" onclick="somceFunc(); return false;" /> Debating whether ...

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

My goal is to create a table with 4000+ rows and 18 columns displaying parsed pages from my site. I need it all on one page for the following reasons: I require the use of filters in the table I need to be able to sort by more than 5 columns Every cell ...

Utilizing JQuery click function to dynamically modify CSS styles

Snippet: <div id="r1242"> <img class="trans" src="http://sakshamcomputer.com/images/printerLogo.jpg"/> <div class="labels" id="p1242"> <strong>Available Printers:</strong><br><br> ...

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

What is the best way to ensure the parent element adjusts to fit its floated children, without exceeding the width of the window?

I am attempting to center a group of floating elements, but due to them being displayed in masonry style, I cannot set them as inline. It is clear that a container is necessary, but I have been unable to find information on how to achieve this: Please dis ...

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

When text is inserted into an inline-block div, it causes the div to shift downwards in

Consider the following HTML code snippet: <div class="one"> Test </div> <div class="two"> </div> <div class="three"> </div> If we apply the following CSS styles: div { display:inline-block; height:30px; ...

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

Div with CSS shadow on all sides

Is there a way to achieve this effect using only CSS (not CSS3) so that it is supported by all browsers? https://i.sstatic.net/XcWEh.png I am looking to create a div with shadows on all sides, where the top area will be used for navigation. I have tried s ...

Different width can be set for the Google Maps template specifically for mobile mode by following these steps

Is there a way to adjust the width of a Google Maps template specifically for mobile mode? While it looks perfect on desktop, the map overflows the screen size on mobile. See my code snippet below: @section ('map') <div id="map"></d ...

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

Having trouble centering the links in the Bootstrap navbar?

I've been struggling to center the links/tabs on my Bootstrap navbar for days now and I just can't seem to get it right. I've gone through countless similar questions without any luck. Something must be off in my code or maybe I'm not t ...

If the corresponding link has not been clicked, the field should be set to hidden

Whenever a user clicks on a specific link, I dynamically load additional information and reveal a multi-select drop-down menu called holds[]. If the user chooses not to click on the "more info" link, then the holds[] drop-down menu will not be displayed, ...

HTML file unable to connect with CSS stylesheet

I'm facing an issue where my CSS stylesheet and HTML files aren't linking properly. Here is the code snippet from my HTML file: <head> <title>Website Sample</title> <meta charset="UTF-8"> <meta http-equiv= ...

Retrieve data from multiple inputs with the same name in a Spring MVC form

I have a JSP page with input fields that can be dynamically added or removed. I need to map these input fields to the @ModelAttributes in Spring MVC, but I'm unsure of how to do this. I want to submit a form that includes: <form enctype="multipar ...

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

Retrieve unique elements from an array obtained from a web API using angular brackets

I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

AngularJS is not properly clearing the datepicker

Upon submitting the form, I have managed to reset all input fields to blank except for the datepicker which still retains the previously selected date. How can I clear that as well? Snippet of HTML: <div> <form name="profileform" role="fo ...