<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="header-right">
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:[email protected]</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">about us</a></li>
<li><a href="#services">services</a></li>
<li><a href="#news">news</a></li>
<li><a href="#request">request a quote</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#track">track your item</a></li>
</ul>
</div>
</div>
`.top-header {
border: 2px solid black;
background: black;
}
.header {
background: white;
height: 80px;
width: 100%;
display: flex;
}
.logo {
padding: 0 17px;
flex: 0 0 400px;
align-self: center;
}
.header-right {
flex: auto;
padding: 0 0 0 20px;
}
.top-bar {
background: #000000;
color: white;
padding: 8px 18px;
border-radius: 0 0 0 8px;
}
.nav__nav-bar {
margin: 0;
float: none;
list-style: none;
text-align: right;
display: flex;
padding: 0;
}
.top-bar__content {
display: flex;
}
.top-bar-content {
padding: 0 16px 0 0;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background: yellow;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}`
[https://codepen.io/kinjalpatel2207/pen/MWwapLz][1]
I want to create a webpage like this.So far I have written a code in html and css like this but I cannot align the top nav bar above the nav-menu items?
HTML
<body>
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:[email protected]</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">about us</a></li>
<li><a href="#services">services</a></li>
<li><a href="#news">news</a></li>
<li><a href="#request">request a quote</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#track">track your item</a></li>
</ul>
</div>
</body>
CSS
——————————————————————————————————-
.nav__nav-bar {
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
font-weight: bold;
margin-top: -102px;
margin-left: 184px;
}
.nav__nav-bar li {
float: left;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:black;
font-weight:bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background-color: yellow;
}
.top-bar__content{
display:inline-block;
}
.top-header {
border:2px solid black;
background-color: black;
}
.header {
background-color: #fff;
height: 80px;
width: 90%;
}
.logo {
padding: 17px;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}
.top-bar {
border: 2px solid red;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 76%;
margin-left: 280px;
height: 52px;
margin-top: -100px;
}
.top-bar-content{
display:inline;
}
The top-nav bar is not getting aligned at the top.I tried using flex but it does not work properly. Also the menu items are not aligned properly.Can anyone help me regarding this issue?
Codepen
menu not opened.. can u plz share this in codepen?
Actually your required image not opened for me.. can u plz explain me in comments.. i will fix
