How can the navbar be edited such that the link 1 appears aligned to the right side link 2 at the ce-CodePudding

I have tried using flex property and justify content but that doesn't work as well. I tried the below mentioned code.

the aim is to make a website with a logo on top and navbar right below like shown below


    <header >
       <div > 
        <img  src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav >
        <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarNavDropdown">
          <ul >
            <li >
              <a  id="home"href="#">link 1</a>
            </li>
            <li >
              <a  id="cart" href="#">link 2</a>
            </li>
            <li >
              <a  id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
</head>




css :
    @media screen and (min-width:777px){
    .nav-link {
      padding:18px 0;
      min-width:120px;
    }
    .navbar {
      padding: 0
    }
  }

.header{
    position:sticky ;
    top: 0;
}

CodePudding user response：

I'd recommend doing some research and practicing with some basic HTML/CSS, so you understand the basics and know what everything does.

For this specific example you should look into 'flexbox'!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header >
    <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw=&w=1000&q=80" alt="">
    <nav >
      <a  href="">link 1</a>
      <a  href="">link 2</a>
      <a  href="">link 3</a>
    </nav>
  </header>

CodePudding user response：

header {
  width: 100%;
  text-align: center;
}
a:first-of-type{
  float: left;
}
a:last-of-type{
  float: right;
}

<header>
  <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw=&w=1000&q=80" alt="">
  <nav>
    <a href="">link 1</a>
    <a href="">link 2</a>
    <a href="">link 3</a>
  </nav>
</header>

CodePudding user response：

Here is one method:

Add d-flex, flex-row, and justify-content-center to your parent div containing the logo.

You can add the same to your parent div for the links (ul and li's)

Your links are left aligned, so you can add "text-center" to classes of your <ul> element.

It would look like this:

<header >
       <div > 
        <img  src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav >
        <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarNavDropdown">
          <ul >
            <li>
              <a  id="home" href="#">link 1</a>
            </li>
            <li >
              <a  id="cart" href="#">link 2</a>
            </li>
            <li >
              <a  id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Also just a note, I see your code above is ending with </head>. Make sure you are not putting this code in the <head> of your site, but the <body> :)