Make one <li> item in my navbar float left, and the rest float right (Bootstrap 5)-CodePudding

I'm working on my first html/css project ever, and I'm using bootstrap. I have a little html experience using Blogger in the past.

When my navbar is expanded, I want the first li item (a button) to float to the left of the page, and the rest of it to float right.

I can get all the items to float one way or the other using flex-start or flex-end but I can't seem to apply it to this single element. I tried using the margin-right property to force it as well, but the results were pretty inconsistent.

I've gone through a bunch of codeply samples as well, and the only other solution I found was treating the button like a logo, which wouldn't collapse into the navigation menu when it became a hamburger.

<nav >
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
            <span ></span>
        </button>
  <div  id="main-navigation">
    <ul >
      <li>
        <a id="resumebutton"  href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
      </li>
      <li >
        <a  href="index.html">Home</a>
      </li>
      <li >
        <a  href="#">About</a>
      </li>
      <li >
        <a  href="#">Projects</a>
      </li>
      <li >
        <a  href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Any custom CSS I wrote to override bootstrap was just for colors and fonts, so I don't think it would affect anything, but I can add it if anyone needs to double check.

Thanks in advance.

CodePudding user response：

You can use position property for button

CodePudding user response：

You can set the first li's width: 100% so that it takes all the available spaces from the left.

And use flex-end on the parent (ul) element to make the rest of the child move to the right.

.navbar-nav{
  display: flex;
  justify-content: flex-end;
 }
.navbar-nav li:first-child{
  width: 100%;
 }

<nav >
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
            <span ></span>
        </button>
  <div  id="main-navigation">
    <ul >
      <li>
        <a id="resumebutton"  href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
      </li>
      <li >
        <a  href="index.html">Home</a>
      </li>
      <li >
        <a  href="#">About</a>
      </li>
      <li >
        <a  href="#">Projects</a>
      </li>
      <li >
        <a  href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

This code seems to place the 'Download Resume' button to the left on medium size screens and larger

<nav >
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
        <span ></span>
      </button>

      <div id="main-navigation" style="" >
        <div>
          <a id="resumebutton"  href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
       </div>
       <ul >
          <li >
            <a  href="index.html">Home</a>
          </li>
          <li >
            <a  href="#">About</a>
          </li>
          <li >
            <a  href="#">Projects</a>
          </li>
          <li >
            <a  href="#">Contact</a>
          </li>
       </ul>
      </div>
    </nav>