Ways to position a section of the navigation content on the right side?

Here is the code for my navigation bar:

index.html

<header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

</header>

styles.css

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}

li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}

This is how my navigation bar appears. I would like the content of the unordered list to be aligned to the right. Can anyone advise me on how to achieve this? See screenshot of navigation bar

htmlcssnavigation

Answer №1

To make the layout of the .header class have space between elements, add justify-content: space-between to it.
To remove the default underline from <a> tags, use text-decoration:none. You can hide the element with class .hidden by using display:none.

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    justify-content:space-between;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}
.hidden{
  display:none;
/*   visibility:hidden; */
}
li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}
#site-name a {
    text-decoration:none;
    color: black;
}
.nav-list a {
    text-decoration:none;
    color: black;
}
*{font-family:sans-serif}
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8>
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">News</a></li>
        <li><a href="#!">Blog</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Contact</a></li>
      </ul>
    </nav>
</header>
</body>
</html>

Answer №2

I have streamlined the code by removing any unnecessary elements and added padding to the a tags for a cleaner appearance. To align your navigation items to the right, simply include space-between in the CSS and it will resolve the issue.

* {
  font-family: sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed black;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    margin: 16px 0px;
}

header a {
  text-decoration: none;
}

li > a {
  color: #484b4f;
  padding: 0.5rem;
}

header > h2 > a {
  color: black;
}

.nav-list {
  list-style-type: none;
}

li {
  display: inline;
}
<header>
  <h2 className="header-site-name">
    <a href="#">RandomSite</a>
  </h2>
    <nav>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>

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

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Personalized design for Sweet alert 2

I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with t ...

javascriptcssvue.jssweetalert2nuxt.js

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

paragraph containing various divs

I am struggling to align my text properly and looking for a solution similar to this example http://jsfiddle.net/xKSUH/. The issue I am facing is that my text is not centered and there seems to be an extra space on the second line... Here is my HTML code: ...

htmlcss

What is the reason behind larger text causing content on the left to be pushed downward?

After creating four basic divs, I decided to modify the header div's properties. Here is the HTML code: <div class="third"> Lorem Ipsum </div> <div class="third"> Lorem Ipsum </div> <div ...

htmlcss

Creating a website without access to the internet

When I'm working on my laptop in locations without internet access, I need to build a website. How can I assess the progress of my pages without an active browser? ...

htmlbrowser

Adjusting the size of the Knob in Ionic 5 upon pressing it

Is there a way to change the size of the knob in an "ion-range" element when it is pressed? I have checked the documentation, but could not find any information in the "ion-range" section. I would like to make this adjustment in SCSS: Normal Behavior htt ...

cssangularionic-framework

CSS properties go awry when a button is added

I have arranged my page to my liking, but when I attempt to insert a button below the image on the left side of the page, everything becomes chaotic. I've been grappling with this issue for some time and am unsure of what steps to take next. Here is ...

htmlcssbuttonstylesalignment

What causes overflow-x scroll to prevent scrolling to the left unless the initial scroll is to the left?

<div class="row justify-content-center mob-view" > <div class="col-lg-3 col-md-4" *ngFor="let slide of specialization"> <div class="brower-box"> &l ...

htmlcssangular

Building a table using Javascript

I have been working on a JavaScript code to create a weather forecast table, but I seem to be encountering some issues. Here is the snippet of my code: for (var i = 0; i < data.list.length; i++) { table += "<tr>"; table += "<td>" + d ...

javascripthtmlhtml-table

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

jqueryhtmlcssjquery-uijquery-animate

Button fails to refresh in Internet Explorer

While the button functions smoothly in Chrome and Safari, it encounters issues in Internet Explorer. In Chrome, the button changes instantly upon clicking. However, in IE, although the status changes in the database upon clicking the button, the visual cha ...

javascriptjqueryhtmlcssinternet-explorer

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

jqueryhtmlcsstwitter-bootstrap

Troubleshooting problem with Bootstrap Modal inputs and header tags

When it comes to the button that says data-whatever="Add a recipe", I think it is causing my input placeholders to be overridden, and I'm not sure why. If I remove it, everything works but the h5 header for the new recipe will be blank. <button ...

htmlbootstrap-4bootstrap-modal

An individual browsing through a different user's profile on the Django platform

I'm trying to create a feature where one user, A, can click on the profile picture of another user, B, and be redirected to B's profile automatically. Any suggestions on how I can achieve this? Take a look at my HTML code where I mentioned someth ...

pythonhtmldjangomodel

Is there a way to display a popover outside of the scrolling area?

One issue I'm facing is that the popover always appears within the scroll area. This means that I have to scroll down in order to view the popover content. Even though I've tried using z-index, I can't seem to show the popover outside of the ...

cssangularjs

Conceal the navbar during the process of the ajax loader loading

My current issue involves utilizing an AJAX loader to conceal my page until all elements have loaded. Unfortunately, the navbar is not hidden along with the other content as shown in the image below. I need assistance in ensuring that everything, including ...

javascriptjqueryhtmlajax

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...

javascriptcssformshtml

Displaying a carousel of cards with a stacking effect using CSS and React

https://i.sstatic.net/254kG.jpgI am looking to design a layout similar to the image provided, where cards are stacked on top of each other with three dots for toggling. Can anyone guide me on how to achieve this visual effect? ...

javascriptcssreactjsbootstrap-4