CODEWITHSUNDEEP
htmlcss
Sailor Jerry
Sailor Jerry

Reputation: 17

Logo in nav bar is pushing li next to it down

I am having some issues with building a nav bar for my website. I have a logo aligned to the right but it is forcing the rest of li to align to the bottom of the logo. How can I make the list items align horizontally center.

<nav class="main_nav">
            <ul>
                <li><a href="#home"><img class="logo" alt="logo" src="images/logo.svg"></a></li>
                <li class="list_item"><a href="#about" class="li_nav">About Us</a></li>
                <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li>
                <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li>
                <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li>
                <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li>
                <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li>
            </ul>
    </nav>

CSS

.main_nav {
  width: 100%;
  display: inline-block;
  background-color: white;
  padding-bottom: .5em;
}

.li_nav {
  color: #939598;
  -webkit-font-smoothing: antialiased!important;
  font-size: 1.05em;
  padding-right: 2.5em;
  display: inline;
}

.logo {
  min-width: 115px;
  max-width: 125px;
  padding-left: 2em;
  padding-top: .25em;
  padding-right: 3em;
  position: relative;
}

.list_item {
  display: inline;
}

Upvotes: 0

Views: 731

Answers (3)

Yi Zhou
Yi Zhou

Reputation: 813

.main_nav {
  width: 100%;
  display: inline-block;
  background-color: white;
  padding-bottom: .5em;
}

li {
    list-style: none;
    float:left;
}
li .li_nav{
  color: #939598;
  -webkit-font-smoothing: antialiased!important;
  font-size: 1.05em;
  padding-right: 2.5em;
  display:block;
  line-height:50px
  
}

.logo {
  padding-left: 2em;
  padding-right: 3em;
  position: relative;
}
<nav class="main_nav">
    <ul>
        <li class="logo"><a href="#home"><img alt="logo" src="http://placehold.it/50x50"></a></li>
        <li class="list_item"><a href="#about" class="li_nav">About Us</a></li>
        <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li>
        <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li>
        <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li>
        <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li>
        <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li>
    </ul>
</nav>

For align horizontally center, depends on your image size and change the line-height accordingly

Upvotes: 1

Mandarr Sant
Mandarr Sant

Reputation: 455

is this outpur r u expecting

check the output in Jsbin

modify ur css as follows

  li{
list-style:none;
float:right;
margin-right:100px;
}

.list_item{
position:relative;
top:-35px;
}

Upvotes: 1

Nicolas Arias
Nicolas Arias

Reputation: 60

Add float:right property to your class "logo"

.logo{
float:right;
}

also add the class "list_item" to logo li container

Upvotes: 0

Related Questions