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

       .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 >
        
        <nav>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div  id="navLinks">  
                <i  onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i  onclick="showMenu()"></i>
        </nav>
        
        <div >
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" >PRODUSELE NOASTRE</a>
        </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

CodePudding user response：

Your DOM order is wrong, try this HTML

   <section >
        
        <nav>
            <div  id="navLinks">  
                <i  onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>

                </ul>
            </div>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div  id="navLinks">  
                <i  onclick="hideMenu()"></i>
                <ul>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i  onclick="showMenu()"></i>
        </nav>
        
        <div >
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" >PRODUSELE NOASTRE</a>
        </div>
    </section>

CodePudding user response：

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 :)