Someone please suggest, what I am doing wrong? Below is the link of my code.

https://codepen.io/MadanSinha/pen/KKyxOaV?editors=0100

Problem that I am facing - I am not able to fixed the postion of the navbar (ul) and header logo (h1) in a single line after using the flex property, getting the ul items in column within the row of h1.

• Why I am unable to use flexbox on navbar?
• Why after using flex properties navbar is not converting into row?
• Is there any simple way where I can put header logo, navbar both together using flexbox?

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Pacifico&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Poppins:wght@200;500;600;700&display=swap");



*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  color:#023E8A;
}

ul{
  list-style-type:none;
  
}

a{
  text-decoration:none;
}

h1{
  font-family:Pacifico;
}

.header{
  background-color:#D8E2DC;
  text-align:center;
  padding-top:0.5rem;
  padding-bottom:.5rem;
  border:1px solid #E8E8E4;
  border-bottom-left-radius:8px ;
  border-bottom-right-radius:8px ;
  box-shadow:0 5px 10px #ECE4DB;
  position:sticky;
}

li{
  padding-top:.2rem;
  padding-bottom:.2rem;
}

.nav-bar{
  padding-top:.5rem;  
  font-family:Poppins;
  color:#FFE5D9;
  display:block;
}


/* ================================= 
  Media Queries
==================================== */




@media (min-width: 769px) {
    .header,
    .main-nav {
        display: flex;
    }
    .header {
        flex-direction: column;
        align-items: center;
        .header{
        width: 80%;
        margin: 0 auto;
        max-width: 1150px;
    }
    }

}

@media (min-width: 1025px) {
    .header {
        flex-direction: row;
        justify-content: space-between;
    }

}

<header >
  <h1 ><a href="#">Portfolio</a></h1>
  
  <ul >
    <li><a href="#">WORK</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
  
<header>

CodePudding user response：

You should change .nav-bar display to flex

.nav-bar{
  padding-top:.5rem;  
  font-family:Poppins;
  color:#FFE5D9;
  display:flex;
}

here is an updated fiddle : https://codepen.io/digitalcaveman/pen/QWOXydd?editors=1100

CodePudding user response：

Try this pen

Or this code

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Pacifico&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Poppins:wght@200;500;600;700&display=swap");


:root{
  --justifyType:space-around;/*try space-between*/
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  color:#023E8A;
}

ul{
  list-style-type:none;
  width:100%;
}

a{
  text-decoration:none;
}

h1{
  font-family:Pacifico;
}

.header{
  background-color:#D8E2DC;
  text-align:center;
  padding-top:0.5rem;
  padding-bottom:.5rem;
  border:1px solid #E8E8E4;
  border-bottom-left-radius:8px ;
  border-bottom-right-radius:8px ;
  box-shadow:0 5px 10px #ECE4DB;
  position:sticky;
        display: flex;
}

li{
  padding-top:.2rem;
  padding-bottom:.2rem;
}

.nav-bar{
  padding-top:.5rem;  
  font-family:Poppins;
  color:#FFE5D9;
  display:flex;
  justify-content: var(--justifyType);
}


/* ================================= 
  Media Queries
==================================== */




@media (min-width: 769px) {
    .header,.main-nav {
    flex-direction:row;
    justify-content: var(--justifyType);
    }
    .header {
        
        align-items: center;

justify-content: var(--justifyType);
    
    }

}

@media (min-width: 1025px) {
    .header {
        flex-direction: row;
        justify-content: var(--justifyType);
    }

}

<header >
  <h1 ><a href="#">Portfolio</a></h1>
  
  <ul >
    <li><a href="#">WORK</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
  
<header>

This is an edit to @ekay 's answer!

• This makes space between (as per asked in comments)
• There are two types, currently its space-around, you can change to space-between if needed in :root
• we also set ul's width to 100%