Mobile navigation with Flexbox

I tried to make a website using bulma and flexbox but I have a problem: I want to make a header like the image that I attach. In a poor words I want that when user use desktop header is like first image and when user use mobile the last 3 icons (user, whislist and cart) are hidden in header and goes to the bottom of the page.

Hey @HeMp4eVeR. You can achieve this using a combination of media queries and flexbox properties. Set a breakpoint for mobile using media queries and change the flex-direction property of the header wrapper to column inside the media query. This will stack the logo and search bar top to bottom in mobile. For the hamburger menu, you need to add that icon in the HTML markup first and set it to display: none;. Then you can set the links to display: none; and the icon to display: block; inside the media queries to display the hamburger menu in mobile devices.
Speaking about the icons near the search bar going to the bottom in mobile devices, you can achieve this using positioning. Add position: relative; to the icon wrapper inside the media rules and add bottom: 0;, left: 0; and right: 0;. This will put the icons at the bottom. The you can change the background color using the media queries itself.

Hope this helps.

1 Like

Thx for reply @paulsonstech.

My problem isn’t with hamburger menu, problem is with the latest tree icons that I want to move bottom in mobile view.

Another question: how can I make the first part in desktop view; I want that Logo, searchbar and icons are like the first image and use all the space like in image

Hi @HeMp4eVeR. For designing for the desktop, you need to specify your CSS rules outside the media queries. For stacking that header from left to right, use flex-direction: row to the header element and use justify-content: space-around so that it has some spacing around the header elements.
If you don’t understand flexbox, I would suggest you revisit the flexbox chapter here in FCC.

Thanks.

1 Like

Hi again and sorry if I make strange questions.

I tried to edit my code but I don’t understand when it’s wrong: as I write before I want that Logo, searchbar and icons are like the first image and use all the space like in image but logo, searchbar and icons in my project are attached without space.

Here’s the code:

HTML

<section>
  <div id="greenmary_banner_top" class="container_wapper">
      <div class="container">
        <div class="row">
        </div>
      </div>
  </div>
  <!-- Hero content: will be in the middle -->
  <div class="hero">
    <div class="hero-body">
      <div class="container ">
        <div class="columns">
            <div class="brand" >
              <img src="img\HempLife-Logo.png" alt="Logo" width="200" height="200">
            </div>
           <div class="hero-searchbar">
            <div class="field">
             <form role="search" method="get" >
               <p class="control has-icons-right">
                 <input class="input is-success" type="text" placeholder="Ricerca">
                 <span class="icon is-small is-right">
                   <i class="fas fa-search"></i>
                 </span>
               </p>
            </form>
           </div>
         </div>
          <div class="greenmary_icons">
             <span style="font-size: 30px; color: black;">
               <i class="fas fa-user"></i>
               <p class="is-size-7">user</p>
              </span>
              <span style="font-size: 30px; color: black;">
               <i class="fas fa-heart"></i>
               <p class="is-size-7">whishlist</p>
              </span>
              <span style="font-size: 30px; color: black;">
               <i class="fas fa-shopping-cart"></i>
               <p class="is-size-7">cart</p>
              </span>
            </div>
        </div>
      </div>
    </div>
  </div>
    <!-- navbar -->
    <nav class="navbar is-link" role="navigation" aria-label="main navigation">
        <div class="navbar-navbarBurgers">
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
        </div>
        <div id="navbar" class="navbar-menu">
              <div class="container">
            <div class="navbar-center"> <!-- Here I have created the navbar-center class -->
                <a class="navbar-item">
            Contact
          </a>
                <a class="navbar-item">
            About
          </a>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link is-arrowless">
                Topics
            </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item">
                About
              </a>
                        <a class="navbar-item">
                Jobs
              </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
</section>
CSS

#greenmary_banner_top {
    background-image: linear-gradient(180deg, #02a5de 0%, #029acf 60%, #028fc0 100%);
    height: 45px;
    justify-content: space-between;
}

.greenmary_icons {
  display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;

}

.brand {
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;

}

.hero-searchbar {
  display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;

}

I don’t know if it’s correct, maybe I need to make a first column block with logo and searchbar and second column block with icons?

1 Like

Hello @HeMp4eVeR. Can you please share a live link of this (like CodePen)? It’s easy to check.
Thanks.

Sure, there is: https://codepen.io/hemp4ever/pen/abZZyRO

1 Like

Oh @HeMp4eVeR! I couldn’t find how to fix it. I tried to wrap your header elements with header tag and set it to display: flex; and gave it justify-content: space-around;. But, it doesn’t work. align-items property is working fine, but that’s not what we want, right? It seems like it’s ignoring the justify-content property completely. :sob:

Thx for support @paulsonstech
:sob: :sob:

1 Like

Noone want to help me?

1 Like

Hey @HeMp4eVeR. If you want anyone’s help, better create a new topic about this problem. That will bring others to the discussion.

Thanks.

To have your header items next to each other:

.columns {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

For the mobile version, add this:

.columns {
  flex-direction:column;
}

To put those three icons into the footer instead of the header, the easiest way to do that is having two sets of icons - one in the header, one in the footer - and then set them to display:none or display:block with media queries.

1 Like

thx @jsdisco, now items in header are in the correct position but how do i set searchbar longest (i would like it to take up the remaining space)?

Another question: do u think that it’s better to make two icon block (iconset1 for desktop and iconset2 for mobile)?

You could give the searchbar-container a width of (for example) 60%, and let the search field take up 100% of that width:

.hero-searchbar {
  width:60%;
}
.hero-searchbar .field {
  width:100%;
}

There may be better solutions but this works as intended (I think).

That might be the only way, otherwise how would you move those icons from header to footer in the mobile version?
One possibility would be to set your whole website to display:grid, but that would require you to restructure your entire HTML and CSS. The easiest way is to have two icon sets and then hide or show them depending on the viewport width.

@jsdisco I don’t know how to show you how much I love you, before asking help here I was bumping my head for several days without finding a solution… Solution that u find. MANY thanks to you and to @paulsonstech for support.

Latest question: I make some changes to my first page code and this is when I search but in mobile view (I use min-width: 481px in media quesries) log and searchbox aren’t in the right position

1 Like

Hello @HeMp4eVeR. Thanks for sharing your love.

To be honest, I didn’t understand what you meant by that. Did you mean that the search bar is not looking good on mobile?

Thanks.

In mobile view searchbar don’t go under logo