the navbar layout has problem in bigger screen sizes

Question

I create a navbar. I started to design it with mobile first method. then I start to design for bigger screen sizes. here I faced to a problem with layout. in navbar I have these elements : logo, li tags, shopping cart icon, button. I want to put logo and li to the right side, and put the shopping cart icon and button to the left. I'll show you the screen capture in mobile: here is the screen capture in mobile screen in this size, layout has no problem. but, I will show you the screen capture of bigger screen size:screen capture in bigger size the problem is that the li tags go to the left side that it shouden't be like that. it should be next to the logo. I think the problem is in the html codes. the order of the html codes are like this : logo, hamburger menu, shopping cart icon, button and then li tags. I think the problem is because of the li tags are the last elemnt. but if I change the order, I'll faced to a problem in mobile screen size. would you plz help me to solve the problem? By the way, I forgot to say I wrote it with css flex. here is the html codes:

*{
  font-family: myfont;
  direction: rtl;
  margin:0;
  padding: 0;
}
.nav-logo{
    width: 70px;
    cursor: pointer;
}
.hamburger-menu{
    display: flex;
    margin-right: 20px;
    cursor: pointer;
    font-size: 25px;
    color: #e63946;
}
nav{
    padding: 10px;

    background-color: #ffffff;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 17.5px );
    -webkit-backdrop-filter: blur( 17.5px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.right{
    display: flex;
    justify-content: flex-start;
    margin-right:30px;
}
.left{
    display: flex;
    justify-content: flex-end;
    margin-left:30px;
}
.column{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
}
.nav-item{
    list-style: none;
}
.nav-item a{
    text-decoration: none;
    color: #35357a;
    line-height: 40px;
}
.nav-item a:hover{
    color: #e63946;
}
.btn-login{
    background-color: #e63946; 
    color:white; 
    border: none;  
    padding: 10px 20px;
    border-radius:50px;
    font-size: 15px;
    cursor: pointer;
}


@media screen and (min-width: 646px) {
    nav{
        display: flex;
        flex-direction: row;
    }

    .nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding: 10px;
    }
    .navbar{
        list-style: none;
        display: flex;
        justify-content:flex-end;
    }
    .column{

    }
    .hamburger-menu{
        display: none;
        cursor: pointer;
        font-size: 25px;
        color: #e63946;
    }
    .right{
        display: flex;
        align-items: center;
        justify-content:flex-end;
    }
    .left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 20px;
    }

}

user_13014089 · Answer

Put all of your navbar items into one flex container, and use the order property and @media queries to change their visual order.

You correctly noticed that your HTML markup was the problem. There are two section elements inside your nav, and that made it hard to put one section (the links) in between the elements of the other section (between the shopping cart and the logo).

This layout can be achieved with either CSS Grid, or with Flexbox. I’ll stick to Flexbox because you already started with it.

Mobile-first layout

vertically arrange the list of links
place the list of links below all the other elements of the navbar (we’ll use flex-wrap: wrap to create a multi-line flex container, and flex-basis: 100% on the list of links to make sure it wraps into a second line)

Screenshot of the mobile layout

Large screen layout (defined in a @media query)

hide the hamburger menu button
horizontally arrange the list of links
place the list of links after the logo, and before the other elements in the navbar. We’ll reset the flex-basis of this item so it no longer wraps into a second line and use the order property to change the visual order

Screenshot of the large screen layout

The order property lets us keep our HTML markup in the same order, but change the visual order of the individual flex items. So you can have your list of links last in your HTML, but then visually show it somewhere else.

All flex items start with an initial order value of 0. Because they’re all in the same ordinal group of 0, they will be visually laid out in the same order as your HTML. But if you give your list of links an order of -1, then it will be laid out before all the items with order: 0.

Here’s a simplified version of your code with a working solution:

body {
  margin: 0;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 24px;

  border-bottom: 1px solid black;
}

.shopping-cart-icon {
  margin-inline-start: auto;
}

.login-button {
  padding: 10px 20px;
  background-color: #e63946;
  color: white;
  border-radius: 50px;
}

nav {
  flex-basis: 100%;
}

.link-list {
  display: flex;
  flex-direction: column;

  list-style-type: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  text-align: center;
  padding: 12px 0;
}

.logo {
  width: 80px;
}

.hamburger-menu-button {
  width: 32px;
}

.shopping-cart-icon {
  width: 40px;
}

@media screen and (min-width: 646px) {
  .hamburger-menu-button {
    display: none;
  }

  .logo {
    order: -2;
  }

  nav {
    order: -1;
    flex-basis: initial;
  }

  .link-list {
    flex-direction: row;
    gap: 16px;
  }
}


  
    
    
    
    ورود
    
      
        فارس گردی
        گالری عکس
        تور مجازی
        وبلاگ

the navbar layout has problem in bigger screen sizes

1 Answers