Trying to move one part of my UL to the left

Question

I am using a simply UL as my navbar, and I am trying to separate the 1 item of the UL and put it to the left side of the page, and keep the other 3 centered, however i cant seem to get it working. I've tried wrapping it in a span and floating it, I've tried making a new UL but that just causes them to be on different lines.

I literally just want the homepage button to be aligned to the left and the rest of the buttons to be centered. Maybe I am missing something obvious.

ul {
    list-style-type: none;
    margin: 10px 0 0 0 ;
    padding: 0;
    text-align: center;
}

li {
    display: inline;
    padding: 0 15px;
}

a {
    color: black;
    text-decoration: none;
    font-size: 30px;
}

<div class="navbar">
<nav>
    <div>
        <ul>
            <li id="homepage"><a href="#">AG Designs</a></li>
            <li id="aboutmebutton"><a href="#">About Me</a></li>
            <li id="portfoliobutton"><a href="#">Portfolio</a></li>
            <li id="contactbutton"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Have you tried using bootstrap? You would be able to build much more flexible/response user interfaces. See this link https://getbootstrap.com/docs/4.0/components/navbar/ — Martin, May 24 '18 at 13:07

Gautam Naik · Answer 1 · 2018-05-24T13:23:16.653

This is one solution, making the first item absolute position

Add this to ur css

#homepage {
  position:absolute;
  left: 0;
}

Doing this, it will center the next 3 items to the center of the page, and push the homepage div to the left

Open the following snippet in full page view

ul {
  position:relative;
  list-style-type: none;
  margin: 10px 0 0 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

#homepage {
  position:absolute;
  left: 0;
}

<div class="navbar">
  <nav>
    <div>
      <ul>
        <li id="homepage"><a href="#">AG Designs</a></li>
        <li id="aboutmebutton"><a href="#">About Me</a></li>
        <li id="portfoliobutton"><a href="#">Portfolio</a></li>
        <li id="contactbutton"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

this can cause an overlap on smaller screens – Pete May 24 '18 at 14:24 — Pete, May 24 '18 at 14:24

Serge Inácio · Answer 2 · 2018-05-25T14:38:17.357

You can select the first child and float it to the left like so:

li:first-child {
  float: left;
}

EDIT: Added jQuery to achieve the desired result. It calculates the width of the first element and removes the left margin of the second li element.

Full code below:

var firstChildWidth = $( "#homepage" ).width();

$( "ul li:nth-child(2)" ).css( "margin-left", -firstChildWidth + "px" );

.navbar {
  background-color: yellow;
}

ul {
  list-style-type: none;
  margin: 10px 0 0 0 ;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

li:first-child {
  float: left;
  padding: 0px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <nav>
      <div>
          <ul>
              <li id="homepage"><a href="#">AG Designs</a></li>
              <li id="aboutmebutton"><a href="#">About Me</a></li>
              <li id="portfoliobutton"><a href="#">Portfolio</a></li>
              <li id="contactbutton"><a href="#">Contact</a></li>
          </ul>
      </div>
  </nav>
</div>

EDIT: Added some jQuery to achieve the desired result

Hope this helps.

Hi thanks for the response. This indeed puts it to the left, but now the rest of the LI items are no longer centered, they are slightly to the right of center — Adam Gamble, May 25 '18 at 12:25
Yes, you are right because it still takes into account the first element to be apart of it. That is why @GautamNaik solution is better than mine ;) — Serge Inácio, May 25 '18 at 13:32
@AdamGamble I added some jQuery to achieve the desired result with this option. — Serge Inácio, May 25 '18 at 13:48

score -1 · Answer 3 · answered May 24 '18 at 13:13

-1

add style="padding-left:50px;" in your second li

answered May 24 '18 at 13:13

sam christy

9
1

Trying to move one part of my UL to the left

3 Answers3