0

I am trying to construct new header with flexbox. Mobile and large screen header versions are a bit different, that is causing conflict and I cant get it work.

  • Logo should not have any top padding or margin on large screens.
  • Menu 2 with cart should be separated with logo on mobile screens.

Is it possible to construct such scenario with flexbox?

Headers diagram: enter image description here

<h1>Mobile header</h1>
<div class="container">
    <div class="box logo"><span>LOGO</span></div>
    <div class="box menu-2"><span>Menu 2</span></div>
    <div class="box cart"><span>Cart</span></div>
</div>

<h1>Large screen header</h1>
<div class="container">
    <div class="box logo large"><span>LOGO</span></div>
    <div class="box menu-1 large"><span>Menu 1</span></div>
    <div class="box menu-2 large"><span>Menu 2</span></div>
    <div class="box cart large"><span>Cart</span></div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.logo { order: 1;}
.menu-2 { order: 0;}
.cart { order: 3;}

.logo.large{ order: 0; flex-basis: calc(10%);}
.menu-1.large { order: 1; flex-basis: calc(90%);  }
.menu-2.large { order: 2; flex-basis: calc(80%);  }
.cart.large { order: 3; flex-basis: calc(10%); }

.box {
    background-color: lightgreen;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    padding: 10px;
    border: 1px dashed black;
}
h1 {
  text-align: center;
  width 100%;
  font-size: 1em;
  padding: 10px;
  margin-bottom: 10px;
  font-style: italic;
}

CODEPEN

Gore
  • 163
  • 2
  • 16
  • 1
    I would consider CSS-grid for this one, better than flexbox – Temani Afif Apr 30 '18 at 08:36
  • You can achieve this easily with media-queries. What are your breakpoints? What resolution are you considering for mobile? – Jorjon Apr 30 '18 at 08:59
  • Really? Lets say 767px for mobile screen. – Gore Apr 30 '18 at 09:04
  • Using flexbox, it's *possible* providing you have extra wrapper(s) **and** can use `display:contents`. Frankly though, @TemaniAfif is correct. CSS-Grid would be the way to go. – Paulie_D Apr 30 '18 at 12:09
  • Thanks you, I thought about css-grid, but I would rather don't use grid because of browser support. – Gore Apr 30 '18 at 12:27
  • @Gore I agree with the above posters. I'd first consider Grid cause it's awesome, but if that isn't an option, just use media queries. With a small amount of research, you will definitely figure out what needs to be changed at a given breakpoint. – Belder Apr 30 '18 at 13:17
  • Well, I did hard research - of course. I ended with complex flexbox on large screens and absolute positioning of Menu 2 and Cart icons on mobile screen. That is working, but it doesn't seems to me to be "elegant/clean" solution. Jorjon and @Belder were talking about media-queries... did you mean "absolute positioning" solution I described right now? Can you be more concrete what exactly would you do with media-queries? Thanks you – Gore Apr 30 '18 at 13:32

0 Answers0