Putting <nav> inline with <header> CSS

html css header nav

18,184

Solution 1

You have to set display to inline for and . Your updated css will be:

  header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0;
    display:inline;
}
nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    float:right;
    display:inline;
}

You can also check at: http://jsfiddle.net/2g763j9t/

Solution 2

Add

display: inline;
float: left;

to the header h1

header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0; 
    display: inline;
    float: left;
}

http://jsfiddle.net/sncb91t8/

This will make the h1 and nav side by side I also added a

<div style="clear: both"></div>

after the nav so the grey background will encompass the h1 and nav

18,184

Author by

AyeZee33

Updated on June 04, 2022

Comments

AyeZee33 almost 2 years

First off, I learned most of what I know about CSS/HTML by using frameworks. I am trying to go back and learn the basics to understand the CSS selectors and inheritance.

I have read on W3C that both and are good semantic markup for a header. So what I am trying to do is create a header with a logo floated left and a navigation menu floated right. The problem is my nav menu is sitting right below my header. I want to make this responsive. Here is what I have thus far.

<body>
<header>
    <h1>Testing</h1>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</header>

The CSS is as follows

header {
    position:relative;
    display:block;
    max-width:100%;
    height:100%;
    margin:0 auto;
    padding:1rem 5rem;
    background:#cccccc;
    color:#fff;
}
header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0; 
}
nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    float:right;
}

nav  li {
    position:relative;
    display:inline-block;
    list-style-type: none;
    font-family: "Open Sans", "Droid Sans", Helvetica, Arial, sans-serif;
    color: #222;
    padding:0 1rem;
}
nav li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
nav > li > a:hover,
nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}

JSFiddle