Click here to Skip to main content
15,436,567 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello how can i move this section - "Home, About ..... " to be at the level of the logo? opo — ImgBB[^]

<section class="header">
     <a href="#" class="logo"><img src="images/logo.png"></a>
     <nav>
        <!---- <a href="#" class="logo"><img src="images/logo.png"></a> -->
         <div class="nav-links">
         <ul>
             <li><a href="">HOME</a></li>
              <!-- About section-->
              <li>
                 <a href="#">ABOUT</a>
               <ul>
                   <li><a href="#">Product info</a></li>
                   <li><a href="#">Company</a></li>
               </ul>
               </li>

               <!--Partners section -->
               <li>
                 <a href="#">PARTNERS</a>
                 <ul>
                     <li><a href="#">Alpha Micron</a></li>
                     <li><a href="#">Optic Sofia </a></li>
                 </ul>
             </li>

             <!--Heaven glasses section-->
             <li>
                 <a href="#">HEAVEN GLASSES</a>
                 <ul>
                     <li><a href="#">Woman</a></li>
                     <li><a href="#">Man</a></li>
                     <li><a href="#">Children</a></li>
                 </ul>
             </li>
             <!--Reviews and contact -->
             <li><a href="#">REVIEWS</a></li>
             <li><a href="#">CONTACT</a></li>

         </ul>

         </div>
     </nav>

 </section>



--- CSS file ---

*
{
    margin: 0;
    padding: 0;
    font-family: 'Popins', sans-serif;
}

.header{
   min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(12, 12, 12, 0.514),
        rgba(83, 83, 83, 0.288)), url(images/korica.jpg);
    background-position: center;
    background-size: cover;
    position: relative;   
}

nav{
    display: -webkit-inline-flex;;
    padding: 1px 50px 75px 100px;
    justify-content: space-between;
    align-items: center;
}
.header img{
    width: 170px;
    height: 6rem;
}
.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: white;
    text-decoration: none;
    font-size: 18px;
    padding: 2px 4px;
}
nav ul li a:hover{
    color: #e9d66b;
    border-radius: 5px;
    box-shadow: 0 0 5px #ffaf1a,
    0 0 5px #ffb833;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 2px solid rgb(255,179,71);
    opacity: 0;
    visibility: hidden;
}

nav ul li:hover>ul{
    top: 40px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
   position: relative;
   margin: 0px;
   width: 150px;
   float: none;
   display: list-item;
   border-bottom: 1px solid rgba(0,0,0,0,.3);
   text-align: left;
}

nav ul ul ul li{
    position: relative;
    top: -70px;
    left: 150px;
} 


What I have tried:

i tried to change .nav and .header but it doesnt work
Posted
Updated 19-Apr-22 21:49pm

1 solution

You can make both elements align to the top by changing .header:
CSS
.header {
     ...
     display: flex;
     align-items: start;
}
nav {
    ...
    flex-grow: 1;
}
If you want the nav to align to the middle of the logo, but both to remain at the top of the page, then you'll need to wrap the logo and nav inside another element, since the .header is set to take the full height of the window.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900