To move two links to the right of the navigation

Question

I'm trying to get the last two of the link "Get started" and "Hire me" to right at the end of the navigation. I've attach a photo and also my code. I'm using SASS for styling

I have Been try and error with this issue for 4 days.I managed to put it the way I wanted it using display flex, it worked after I position absolute on the logo enter image description 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>Pratice</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>

Sorry that I can't finish the sentence. Need help on this issue — Paiz, Mar 02 '18 at 20:10

Stickers · Accepted Answer · 2018-03-03T15:39:52.980

You need to fix the markup first, a div cannot be directly under ul. And I suggest to use flexbox for the layout.

.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 include the logo be part of the row, you can either 1) use nested flexbox, or 2) make the logo to be 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.stack.imgur.com/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.stack.imgur.com/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>

Thanks for the help @Stickers. I guess the nav works but, the nav is under the logo rather than to the side of the logo. — Paiz, Mar 03 '18 at 07:13
Here are two options that will work: 1. You can move your logo into a new
OMG! Thank you so much! Took me 5 days re-doing just to know its my mark-up my GAWD! Thanks @Ian and Stickers — Paiz, Mar 03 '18 at 12:41
@Paiz I updated it above with a couple of examples for that. — Stickers, Mar 03 '18 at 15:35
@Stickers Thank you for the help and taking time to update example.Will use this for future used. — Paiz, Mar 03 '18 at 20:26

score -1 · Answer 2 · answered Mar 02 '18 at 20:21

-1

Have you considered using bootstrap or another css framework? By doing this without a css framework you're doing a lot of reinventing the wheel. Practically every webpage in the world has a navbar so this kind of thing is built for you with the framework. It also has the added perk of being responsive so it looks good on all devices (desktops, tablets, phones). In general you will have a much easier time.

Here is documentation for the bootstrap navigation bar component:
https://getbootstrap.com/docs/4.0/components/navbar/

Here is a page with some examples you can play with: https://getbootstrap.com/docs/4.0/examples/navbars/

answered Mar 02 '18 at 20:21

Ian Shields

177
2
8

Because right now, I'm trying to get my basic of HTML & CSS straight by practicing. Just to make sure that I practically understand rather than try and error without understanding it in terms of CSS. I will look into bootstrap and other languages. Appreciate for the advice given. Thanks Ian – Paiz Mar 03 '18 at 06:50
Makes sense! Just added to Stickers answer in comment. – Ian Shields Mar 03 '18 at 12:18

To move two links to the right of the navigation

2 Answers2