Moving hamburger menu, add cart and search bar to header in mobile only

Store Design
1

Is there an easy way to move my hamburger menu to the left and then add the search and cart icon to my header (all in mobile view only). I currently have a sticky cart icon that I’ll remove if I can get the cart icon to the top. Thanks! www.dollylana.com

2

@Dolly_Lana since you seem to use a custom theme it’s hard to give a short answer without access to your theme code. (Maybe you should ask Dan first :wink: )

Moving the burger menu can be done by adding the following CSS block to your code:

span.mobile-toolbar.desktop_hidden {
    right: initial;
}

The cart icon is a little more complex. With theme access still manageable.

Hope this helps!
Mario

3

@Dolly_Lana to move the cart from it current floating/fixed positioning to the mobile header, open assets/responsive.css and find this chunk of code:

@media (max-width: 767px) {
  span.toolbar-cart.desktop_hidden {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: #e6f3ef;
    padding: 10px !important;
    height: 55px;
    width: 55px;
    text-align: center;
    line-height: 50px;
    border-radius: 100%;
    box-shadow: 0 0 5px #5f9595;
    color: #fff;
  }
}

you will have to replace it with this:

@media (max-width: 767px) {
    span.toolbar-cart.desktop_hidden {
    padding: 10px !important;
    right: -8px;
    text-align: center;
    color: #fff;
  }
}

Basically with that we have removed the properties which made the cart float on the lower-right corner, leaving you with this:

Screen Shot 2021-02-06 at 18.00.06.png
Screen Shot 2021-02-06 at 18.00.06.png722×1238 487 KB

Then, to modify the cart icon color, find the following in the same file:

span.head_search_tg svg, .toolbar-cart .current-cart svg {
    fill: #000;
    float: left;
}

and replace with this:

span.head_search_tg svg, .toolbar-cart .current-cart svg {
    fill: #fff;
    float: left;
}

This would be the result:

Screen Shot 2021-02-06 at 18.03.49.png
Screen Shot 2021-02-06 at 18.03.49.png724×1206 483 KB

2 Likes
4

@PeanutButter One quick note, on desktop, the search and cart icon are now slightly off from my main menu. They’re floating a bit above.

5

Oh dam… sorry for that. I will provide fix for that tomorrow morning

6

I am having the same issues. I have done alot of modifications to the debut theme to achieve the final look I wanted. However there are still a few things that are out of my knowledge scope since this is my first attempt at coding. I will try the solution you provided to see if it works and post results. I know i need HELP!!!