CODEWITHSUNDEEP
javascripthtmlcss
user5534633
user5534633

Reputation:

How do I shift content to left in nav bar

So I know this will be a very easy fix, however, I cannot figure it out for the life of me.

How can I shift the letters in this nav bar to the very left?

		$(document).ready(function() {
		  $(".letter").click(function(e) {
		    $(".letter").parent().removeClass('current');
		    $(this).parent().addClass('current');

		    var letter = $(this).html().trim();
		    $(".submenuDiv").hide();
		    x = e.clientX - 100;
		    pos = $(this).position();
		    y = pos.top + 50;
		    $("#div" + letter).css({
		      left: x,
		      top: y,
		      position: 'absolute'
		    });
		    $("#div" + letter).show();
		  });
		});
.alphabetNav {
  background-color: #D9DDDF;
}
.alphabetNav li {
  text-decoration: none;
  cursor: pointer;
  float: left;
  display: inline;
  list-style: none;
  background-color: #E9EDEF;
  padding: 3px;
  margin: 2px;
}
.letter:hover {
  color: red;
}
}
.submenuDiv ul {
  display: inline;
}
.submenuDiv ul li {
  float: left;
  list-style: none;
  padding: 5px;
  margin: 10px;
  background-color: #F1F5F7;
  border: solid 1px black;
  border-radius: 10px;
  font-size: 12px;
}
.submenuDiv {
  display: none;
}
.alphabetNav {
  width: 550px;
  height: 27px
}
.noNav li {
  cursor: default;
  color: #ccc
}
li.current {
  background: #fff
}
.alphabetNav li {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>
  <ul class='alphabetNav'>
    <li><a class='letter' id='letterA'>A</a>
    </li>
    <li><a class='letter' id='letterB'>B</a>
    </li>
    <li><a class='letter' id='letterC'>C</a>
    </li>
    <ul class='noNav'>
      <li>D</li>
    </ul>
    <li><a class='letter' id='letterE'>E</a>
    </li>
    <ul class='noNav'>
      <li>F</li>
    </ul>
  </ul>

  <!-- Submenu for letter A -->
  <div class='submenuDiv' id='divA'>
    <ul>
      <li>
        Abbotsford-Mission (B.C.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter B -->
  <div class='submenuDiv' id='divB'>
    <ul>
      <li>
        Barrie (Ont.)
      </li>
      <li>
        Brantford (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter C -->
  <div class='submenuDiv' id='divC'>
    <ul>
      <li>
        Calgary (Alta.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter D -->
  <div class='submenuDiv' id='divD'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter E -->
  <div class='submenuDiv' id='divE'>
    <ul>
      <li>
        Edmonton (Alta.)
      </li>
    </ul>
  </div>
</body>

Thanks in advance!

Upvotes: 0

Views: 57

Answers (3)

Rahul Desai
Rahul Desai

Reputation: 15491

All you need is:

.alphabetNav{
    padding-left: 0px;
}

Get familiar with using the Web Inspector in the browser, you will get to know what you need to do to fix your problem. :)

Here is a snapshot from Chrome (the green part is for padding): enter image description here

Upvotes: 2

Lucky Chingi
Lucky Chingi

Reputation: 2258

Set padding to 0 on alphabetNav

Upvotes: 0

Dan
Dan

Reputation: 11084

Remove the padding from the container.

.alphabetNav{
    padding:0;
    background-color:#D9DDDF;
}

Or just the left padding.

.alphabetNav{
    padding-left:0;
    background-color:#D9DDDF;
}

Upvotes: 0

Related Questions