CODEWITHSUNDEEP
htmlcssvertical-alignment
scandir
scandir

Reputation: 313

Vertical alignment of navigation bar not working

So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?

Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/

<style>
    .navbar {
  width: 100%;
  height: 90px;
  background: black;
  border-radius: 0px !important;
}
.navbar .logo-holder {
  background-image: url(../img/logo.png);
  width: 75px;
  height: 57px;
  margin-top: 15px;
}
.navbar .sections {
  list-style: none;
  margin-left: 70px;
  margin-bottom: 50px;
}
.navbar .sections li {
  display: inline-block;
  padding: 0 25px 0 0;
  vertical-align: middle;
}
</style>


<nav class="navbar" role="navigation">
        <div class="container">
            <div class="logo-holder"></div>
            <ul class="sections">
                <li><a href="#">Shop</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Experience</a></li>
                <li><a href="#">Company</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        </div>
    </nav>

Thank you!

Upvotes: 2

Views: 1043

Answers (3)

user3888528
user3888528

Reputation: 1

What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.

Upvotes: 0

David Bohunek
David Bohunek

Reputation: 3201

If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:

.navbar {
  width: 100%;
  height: 90px;
  line-height:90px;
  background: black;
  border-radius: 0px !important;
}
.navbar .logo-holder {
  position: absolute;
  top:0;
  left:0;
  background-repeat: no-repeat;
  background-image: url(../img/logo.png);
  width: 75px;
  height: 57px;
  margin-top: 15px;
}
.navbar .sections {
  list-style: none;
  margin-left: 70px;
  margin-bottom: 50px;
}
.navbar .sections li {
  display: inline-block;
  padding: 0 25px 0 0;
}

And updated fiddle

Upvotes: 2

gaurav5430
gaurav5430

Reputation: 13882

i changed the display of your logo-holder to inline-block and then set vertical-align:middle

now it appears next to the logo, and vertically centered.

see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/

this is the complete css:

.navbar {
  width: 100%;
  height: 90px;
  background: black;
  border-radius: 0px !important;
}
.navbar .logo-holder {
  background-image: url(../img/logo.png);
  width: 75px;
  height: 57px;
  margin-top: 15px;
  display:inline-block;
    vertical-align:middle;
}
.navbar .sections {
    display:inline-block;
    vertical-align:middle;
  list-style: none;
    margin:0px;
    padding:0px;
    background:#aaa;
}
.navbar .sections li {
  display: inline-block;
  padding: 0 25px 0 0;
  vertical-align: middle;
}

Upvotes: 0

Related Questions