To shift two links over to the right within the navigation bar

I'm struggling to position the last two links, "Get started" and "Hire me", at the right end of the navigation bar. I have attached a photo as well as my SASS code below.

After 4 days of trial and error, I finally managed to achieve the desired layout by using display flex and absolute positioning on the logo. Check out the image here

.header
  max-width: 100%
  height: 80px
  border: 1px solid #dfe3e8

.container
  height: 100%
  max-width: 100%
  padding: 0px 7em
  display: flex
  justify-content: flex-start


.logo
  background: url("/sass/img/test-logo2.svg")
    size: contain
    repeat: no-repeat
  width: 135px
  height: 35px
  margin: 20px 20px 0px 0px

.nav
  margin: 7px 0px 0px

  ul
    lists-style: none

  ul li
    display: inline-block
    padding: 20px

  ul li a
    text-decoration: none

  .right-nav
    display: inline-flex
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link rel="stylesheet" href="css/app.css" type="text/css">
    <!--- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <header class="header">
      <div class="container">
        <div class="logo">
          <!---<img src="../sass/img/test-logo2.svg" alt="test" class="logo">-->
        </div>
          <div class="nav">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            <div class="right-nav">
              <li><a href="#">Get started</a></li>
              <li><a href="#">Hire me</a></li>
            </ul>
            </div>
          </div>
      </div>
    </header>


  </body>
</html>

htmlcssflexbox

Answer №1

Before proceeding further, it is important to fix the markup as a div cannot directly follow a ul. Additionally, utilizing flexbox for layout purposes is recommended.

.nav ul {
  display: flex;
  padding-left: 0;
}

.nav li {
  list-style: none;
}

.nav li:not(:last-child) {
  margin-right: 20px;
}

.nav li:nth-last-child(2) {
  margin-left: auto; /* align last two items to the right */
}
<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get started</a></li>
    <li><a href="#">Hire me</a></li>
  </ul>
</nav>

To ensure that the logo is part of the row, you can either 1) utilize nested flexbox or 2) consider making the logo one of the list items.

Example 1:

.container {
  display: flex;
  align-items: center;
}

.nav {
  flex: 1;
  margin-left: 20px;
}

.nav ul {
  display: flex;
  padding-left: 0;
}

.nav li {
  list-style: none;
}

.nav li:not(:last-child) {
  margin-right: 20px;
}

.nav li:nth-last-child(2) {
  margin-left: auto;
}
<div class="container">
  <div class="logo"><img src="https://i.sstatic.net/U8Pq6.png" width="30" height="30" alt=""></div>
  <nav class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Get started</a></li>
      <li><a href="#">Hire me</a></li>
    </ul>
  </nav>
</div>

Example 2:

.nav ul {
  display: flex;
  align-items: center;
  padding-left: 0;
}

.nav li {
  list-style: none;
}

.nav li:not(:last-child) {
  margin-right: 20px;
}

.nav li:nth-last-child(2) {
  margin-left: auto;
}
<nav class="nav">
  <ul>
    <li><img src="https://i.sstatic.net/U8Pq6.png" width="30" height="30" alt=""></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get started</a></li>
    <li><a href="#">Hire me</a></li>
  </ul>
</nav>

Answer №2

Have you thought about incorporating a CSS framework like Bootstrap into your project? It can save you a lot of time and effort by providing pre-built components, such as navigation bars, that are responsive and work well on all devices. This way, you won't have to reinvent the wheel every time. Check out the documentation for Bootstrap's navigation bar component here:

https://getbootstrap.com/docs/4.0/components/navbar/

You can also explore different examples and play around with them on this page:

https://getbootstrap.com/docs/4.0/examples/navbars/

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

Transmitting flawless data to the Angular controller

In my Angular application, I have some checkboxes that are pre-checked and in the ng-pristine state. How can I receive these inputs in my controller without marking them as dirty when the form is submitted? <input type="checkbox" name="c1" name="favor ...

javascripthtmlangularjsforms

Guide on how to position a single anchor at the center of a div alongside other elements

I am having trouble centering an anchor on my webpage. I have tried using text-align: center;, but it always puts the link on a new line due to the required div element. Other methods like margins and spans have not worked for me either. span.right { ...

htmlcssbootstrap-5

What is the best way to position a sidebar alongside content using flexbox?

As a newcomer to web development, I recently attempted to use flexbox for the second time while working on the layout for my website. However, I encountered an issue with trying to float aside next to content. Despite my efforts, it seems to just disappear ...

htmlcssflexbox

The ideal location for the style.css file in a WordPress website

I'm currently working on creating my own WordPress theme and utilizing SASS to write the CSS. I want the final compiled CSS to be minified, so I have a question: If I set SASS to compile the CSS in my style.css file (located in the main theme folder) ...

htmlwordpresscss

Discovering the specific link on a different page that was clicked to navigate to the current page

Suppose I have two HTML pages called foo.html and bar.html. In foo.html, there are two links to bar.html - one from an image and the other from text content. If a user clicks on one of these links and lands on bar.html, is there a way to determine which ...

javascripthtmljquery

Is it possible to save an HTML div as an image file?

Is there a way to save the output of an HTML div as an image using rmarkdown or R, possibly with a package like htmltools? For example: <div class="w3-container w3-teal"> <h1>My Header</h1> </div> ...

htmlcssr

The code functions perfectly on JSfiddle, but for some reason it halts when implemented on

Unfortunately, the code that was working perfectly on JSfiddle seems to be encountering issues when implemented on a regular HTML site. The content loads fine but there seems to be an error with the preview function after selecting an image. We have colla ...

javascriptjqueryhtmlcss

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

What is the best way to format this <li> element so that the second line of text starts directly below the beginning of the first line, rather than below the bullet point itself?

Is there a way to align the second row of a list item directly below the text and not below the bullet point? <ul class="arrow-list"> <li>Clear and consistent brand identity</li> <li>+47.08% Increase in website registration ...

htmlcss

Creating dynamic input forms in PHP

New to PHP and seeking guidance! I'm in the process of creating a photography website and encountering an issue with a specific page. Essentially, I need this page to display a form with a varying number of inputs. The goal is to have a dynamic visua ...

javascriptphphtmlforms

Is there any method to determine whether a floated element has been pushed down?

Imagine a dynamic menu with floating elements, each set at a width of 150px. As the menu's width decreases, the elements progressively move to the next row. You are contemplating how to detect when an element has been moved down. One approach could b ...

javascripthtmlcsscss-float

Is it possible to use the HR tag to span the entire page width

When I use the HR tag in my HTML page, I notice that the horizontal line does not extend all the way across the X axis of the page. There are gaps on both the left and right sides. How can I fix this issue? Here's an example of the code I'm usin ...

htmlcss

Utilizing Bootstrap to iterate through items in a view

I am facing a small issue. I have multiple products in my shop (the exact number is unknown). On the main site, I want to display only 3 products per row. Unfortunately, my current code only shows one row and it doesn't look appealing. The layout is d ...

htmltwitter-bootstraploopsforeachrow

Dynamically transforming JSON data into an HTML table

I'm new to HTML and web development, and I'm trying to create a website where a server-side Python script returns JSON data that needs to be displayed in a table on the webpage. The structure of the JSON can vary each time, so the table must be d ...

javascripthtmljqueryjson

Using Html.BeginForm to route to a Web Api endpoint

I need help figuring out how to make my page post to my Web API controller instead of my Area/Controller/Action. I've tried using both Html.BeginForm and Ajax.BeginForm, but haven't had any success so far. Here's what I've attempted: @ ...

c#htmlasp.net-mvcasp.net-web-api

Display <span> next to <select>

Currently, I have a <span> and a <select>. However, in the following code, the <span> is displayed above the <select>. My goal is to arrange it so that the <span> is shown first, followed by the <select>. .requiredSta ...

htmlcss

When I incorporate the "a" tag, transformations take place within my divs

My divs undergo changes when I use the "a" tag. Despite writing 600 lines of code, my website is starting to malfunction. It was not supposed to have any impact when I used the "a" tag. Note: I never assigned a class to it. Here is an example: <a hre ...

javascriptc#htmlcssbootstrap-4

Is it possible to embed a Blazor component as a Web Component in a standard HTML page that is not using Blazor?

Is there a way to render a Blazor component as a standalone DOM fragment, or integrate it as a standard Web Component in a vanilla HTML/JS page? This question may seem simplistic from the perspective of Blazor architecture. While I'm no expert in Bla ...

c#html.netblazorweb-component

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

I'm struggling to customize the appearance of child th elements using the TableHead component from MaterialUI. While I've been successful in modifying various properties, I'm facing difficulty in changing the hover color. Below is the snipp ...

csstypescriptmaterial-ui