How to center the logo, while having the elements near it? - html

Question

.header{
min-height: 90vh;
width: 100%;
background-image: linear-
gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),
url(../images/background.jpg);
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
}
nav{
min-height: 7%;
background-color: white;
opacity: 0.8;
display: flex;
padding: 2% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 140px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 1s;
}
.nav-links ul li:hover::after{
width: 100%;
}
nav .fa{
display: none;
}
<section class="header">
<nav>
<img src="../images/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>LOCATIONS</li>
<li>PRODUCTS</li>
<li>CONTACTS</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
PRODUSELE NOASTRE
</div>
</section>
Also, I need some help related to the size of the navbar, how do I make it smaller in terms of height? I did my best to go with "min-height: 7%;" but it is not enough...
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
[![It needs to look smh like this][2]][2]
[![So this how the navbar currently looks][1]][1]
[1]: https://i.stack.imgur.com/UVWJg.jpg
[2]: https://i.stack.imgur.com/BNswb.png

Answer 1

Your DOM order is wrong, try this HTML
<section class="header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
</ul>
</div>
<img src="../images/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>LOCATIONS</li>
<li>PRODUCTS</li>
<li>CONTACTS</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
PRODUSELE NOASTRE
</div>
</section>

Answer 2

if you want elements around your logo and Logo to be centered then your code is totally written wrong.
make parent-div with display property:flex
and then make three child div with class nav-left logo and nav-right and give them width of percentage 33.33 %
include ul li in first div with class nav-left
then add your logo with in second div element so that you can control your image responsiveness
and lastly include ul li in third div with class nav-right
ABOUT HEIGHT
remove height from nav and I am assuming you are new to code then you should also do this
ul,li {
padding: 0;
margin : 0;
}
it should be done before you start styling because some html tags have default padding and margins (give this search on Google so you know which tags have this default styling e.g are p tags heading-tags anchor-tags etc,..) you have to remove this and then add your styles. Hope this will help you out :)