CODEWITHSUNDEEP
htmlcss
Saxophlutist
Saxophlutist

Reputation: 291

Misaligned elements in navigation bar

I am creating a website and am currently working on the main navigation bar. It looks like I am having trouble getting the elements to line up. It was working mostly fine until I added the hamburger menu icon at the top right. Screenshot

I am guessing it has something to do with turning on Float in order to get the logo and hamburger icon to the edges of the page while keeping the links intact.

Here is the source code for the navigation bar. (After PHP execution.)

    <html lang="en">
<head>
    <meta charset="utf-8">
    <title>Alexworks</title>
    <link rel="stylesheet" type="text/css" href="/resources/CSS/main.css" media="screen" />
<body><nav  id="navigation">
    <ul>
        <li id="logo"><a href="http://alexandstein.com/">Alexworks</a></li>
        <li><a href="http://alexandstein.com/main/about">About</a></li>
        <li><a href="http://alexandstein.com/main/projects">Projects</a></li>
        <li><a href="http://alexandstein.com/main/meta">Meta</a></li>
        <li id="hamburger"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall"/>        </li>
    </ul>
</nav><div id="content">

And here is the CSS pertaining to the navigation bar.

    body{
    font-family: helvetica;
    font-size: 1.1em;
    margin: 0%;
    padding-top: 0%;
}

#navigation{
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin: 0%;
    padding: 0%;

    background-color: black;
    height: 2em;
}
#navigation ul{
    margin: 0%;
    padding: 0%;
    padding-top: 0%;
}
#navigation a{
    color: #aaa;
}
#navigation a:visited{
    color: #999;
}
#navigation a:hover{
    color: #bbb;
}
#navigation li{
    display: inline-block;
    width: 15em;
    height: 1.8em;

    border-bottom-style: solid;
    border-bottom-color: red;
}
#navigation li:hover{
    background-color: #333;
}
#navigation .iconSmall{
    width: 30px;
    height:30px;
}
#navigation #logo{
    display: inline-block;
    text-align: left;
    width: inherit;
    float:left;
    letter-spacing: 5px;
}
#navigation #links{
    display: inline-block;
}
#navigation #hamburger{
    width: 30px;
    border-bottom-style: none
    float: right;
}

a{
    text-decoration: none;
}

Excuse any messy code. I'm used to programming and not hypertext and style sheets.

Upvotes: 0

Views: 516

Answers (1)

bPratik
bPratik

Reputation: 7018

The issue is the missing ; semicolon in your CSS after border-bottom-style: none

Fix:

#navigation #hamburger{
    width: 30px;
    border-bottom-style: none;
    float: right;
}

Demo: http://jsfiddle.net/pratik136/yCV6D/

Upvotes: 2

Related Questions