CODEWITHSUNDEEP
htmlcssnavigationfixed
Anthony726
Anthony726

Reputation: 85

How can I get the nav-bar into the header?

I'm trying to get the navigation bar inside of the header but it only stays below it. How can I fix this? The nav divs are inside of the <header> so I'm not sure why the entire nav-bar is set below the header.

Here's the JSFIDDLE link.

HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FMHS Choral Dept.</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
<link rel="icon" type="text/css" href="img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>

<body>
<header><span><a href="#">FMHS Choral Department</a></span></p>
<div class="nav_wrap">
<div class="nav_items">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Calender</li>
<li>News</li>
<li>Awards/Honors</li>
<li>Documents</li>
<li>Links</li>
</ul>
</div><!--end of nav_items-->
</div><!--end of nav_wrap-->
</header><!--end of header-->
<div class="container">


</div><!--end of container-->
</body>
</html>


CSS Code

@charset "utf-8";
/* CSS Document */

body {
    background-image:url(../img/crossword_green.png);
    margin:0;
}

/* HEADER */

header {
    font-family: Roboto;
    width:100%;
    height:50px;    
    font-size:24px;
    background:#FFF;
    text-align:left;
    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
    position:fixed;
    top:0;
    line-height:50px;
}


header span {
    margin-left:20px;   
}

header span a {
    text-decoration:none;
    color:#000; 
}

.nav_wrap {
    width:800px;
    float:right;
    background:#f0f;    
}

.nav_items ul li {
    display:inline-block;
    list-style-type:none;
    float:right;    
}

/* CONTAINER */

.container {
    width:900px;
    height:800px;   
    border-radius:5px;
    background:#fff;
    margin:auto;
    margin-top:70px;
}

Upvotes: 0

Views: 115

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

http://jsbin.com/lufik/1/edit

First, you need to use some CSS reset, I used the Global one:

*{margin:0; padding:0;}

Than you don't need height set to header
...unless you want to replace your menu with an icon for 'mobile'.

header {
  font-family: Roboto;
  width:100%;
  /*height:50px;*/       /* nope */

you don't need width for your nav wrapper, you already floated it right:

.nav_wrap {
    /*width:800px;*/    /* njaaah */
    float:right;
}

you don't need to float left your LI elements:

.nav_items ul li {
    display:inline-block;
    list-style-type:none;
    /*float:right;*/    /* nöööu */
}

P.S: I would really apply that @media rule for a fancy nav tab icon!

Upvotes: 2

Related Questions