CODEWITHSUNDEEP
htmlcss
Ubayd Sharif
Ubayd Sharif

Reputation: 3

I can't seem to put my header and navbar on the same line together

Basically I am fairly new to the HTML/CSS landscape, and I have encountered a problem where I want to put my header (which has an h1 within it), and my navbar on the same line. Preferably my header floating left, and then my navbar following closeby to the left of my header. But everything I've tried so far doesn't get me the results I am wishing for.

I've tried floating my header (which has an id of mainHeader) left, and then my navbar (which has an id of navBar) left, and that hasn't worked. I've a;sp tried floating my header left, and then my navbar right, and that hasn't worked either.

<header class="mainHeader"><h1>Website</h1></header>
    <div class="container">
        <nav id="navBar">
            <ul>
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Books</li>
                </a>
                <a href="#">
                    <li>Contact Us</li>
                </a>
            </ul>   
        </nav>
        </div>
        <div class="clr"></div>
        <div class="container">



#mainHeader{
    float: left;
    width:30%;
    box-sizing: border-box;
}
#navBar{
    ;
    margin-top:0px;
    float:left;
    padding:0;
    margin:0;
    float:right;
    width:70%;
    box-sizing: border-box;
}
#navBar ul{
    list-style: none;
    text-align: center;

}
#navBar li{
    display: inline;

}
#navBar a{
    text-decoration: none;
}

Upvotes: 0

Views: 37

Answers (1)

Bhanu
Bhanu

Reputation: 351

Its fairly simple to do with flex. 

.menuwrappper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul{
  display: flex;
}

ul li{
  list-style: none;
  margin-left: 30px;
}
<div class="menuwrappper">
  <header class="mainHeader"><h1>Website</h1>
</header>
    <div class="container">
        <nav id="navBar">
            <ul>
               <li><a href="#">Home</a></li>
                             <li><a href="#">Home</a></li>

                             <li><a href="#">Home</a></li>

                             <li><a href="#">Home</a></li>

                             <li><a href="#">Home</a></li>

            </ul>   
        </nav>
        </div>
 

</div>

Also, li needs to be the direct child of ul or ol.

I would recommend learn flex(https://css-tricks.com/snippets/css/a-guide-to-flexbox/). It will help you in layouting your webpage.

Upvotes: 1

Related Questions