Reputation: 83
I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right. Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li><a href="/contact/">Contact</a></li>
<li><a href="/search/">Search</a></li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li><a href="/investors/">INVESTORS</a></li>
<li><a href="/career/">CAREER</a></li>
<li><a href="/our portfolio/">OUR PORTFOLIO</a></li>
<li><a href="/solutions/">RETAIL SOLUTIONS</a></li>
</ul>
</nav>
</div>
</header>
Thank you.
Upvotes: 0
Views: 2370
Reputation: 128
Don't use float:right
instead use display:inline
why inline
? inline
- basically it starts with new line and occupy the whole parent size
I also combine both header_nav1
and header_nav2
on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li><a href="/contact/">Contact</a></li>
<li><a href="/search/">Search</a></li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li><a href="/investors/">INVESTORS</a></li>
<li><a href="/career/">CAREER</a></li>
<li><a href="/our portfolio/">OUR PORTFOLIO</a></li>
<li><a href="/solutions/">RETAIL SOLUTIONS</a></li>
</ul>
</nav>
</div>
</header>
Upvotes: 1
Reputation: 364
I found out that it is caused by the container class.
You can either remove the container or change float: right
to display: inline-block
Upvotes: 2