Customizing my header design for mobile devices

[blockchaingrunt]

Hello, is there anyone that can make my day. I've been working on this for 2 days no sleep. lol. I've tried everything. adding codes to base and theme. My site looks great but the header is terribly designed. I need to change it to be not so tall in height also. Here is a before snapshot on my phone and then i photoshopped my goal. Any help, would be greatly appreciated. I will try everything to get it. 

[Raj-webdesigner]

I will help you anyway

What kind of help do you need?

[blockchaingrunt]

I posted what i need help with. I need my mobile header to look like this. I've tried everyone's issues before in the community. pasting codes in the theme and base files. But no luck. Last night i went through line of line in the base.css file. Same problem on speedystemecula.com 

[Raj-webdesigner]

Hello,

Can you remove this Text show in screenshot

[blockchaingrunt]

I wish. Thats on my wishlist too. So annoying. 🙂

[blockchaingrunt]

see how the logo is stretched to. looks nothing like the website on desktop.

[Raj-webdesigner]

please Add This css in your base.css

@media screen and (max-width:768px) {
    .wishlist a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menuposrow, .wblesf {
        text-align: center;
        align-items: center;
        justify-content: space-between;
    }
    .header__icons .slidedown_section, #cart-icon-bubble {
        margin-left: 5px !important;
    }
    .wbsetmyuirt {
        flex: 0 0 0;
        max-width: 100%;
        display: flex;
        padding: 0;
    }
    .row.wblesf {
      justify-content: end !important;
      padding: 0 10px !important;
    } 
    .header__icons .wbheadwish {
        padding: 0 !important;
    }
    .wbmenuup {
        position: absolute;
        top: 50% !important;
        transform: translate(0, -70%);
        left: 0;
        background: transparent;
        max-width: unset;
        width: auto;
    }   
    .headlogo {
        padding: 0 50px !important;
    }
    .wbwishcount {
        display: block !important;
    }
    .wbwishcount{
        right: 5px !important;
        top: -6px !important;
    }
}

[Raj-webdesigner]

Please Put Again

[blockchaingrunt]

amost my friend. we having some coffee this morning. refresh. Icons needs to be a bit bigger and the logo no so stretched and that wishlist text has to go. But wow, i was up all night just trying to do what you did.

[blockchaingrunt]

if you tap the menu, it went away too.

[Raj-webdesigner]

My Code Is Again Put In Your Code
Beacuase i edite my code

[Raj-webdesigner · Accepted solution]

this Code Is Old Code Change And Put on New Code In base.css

@media screen and (max-width:768px) {
    .wishlist a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menuposrow, .wblesf {
        text-align: center;
        align-items: center;
        justify-content: space-between;
    }
    .header__icons .slidedown_section, #cart-icon-bubble {
        margin-left: 5px !important;
    }
    .wbsetmyuirt {
        flex: 0 0 0;
        max-width: 100%;
        display: flex;
        padding: 0;
        justify-content: end;
        padding: 0 15px;
    }
    .header__icons .wbheadwish {
        padding: 0 !important;
    }
    .wbmenuup {
        position: absolute;
        top: 50% !important;
        transform: translate(0, -70%);
        left: 0;
        background: transparent;
        max-width: unset;
        width: auto;
    }   
    .headlogo {
        padding: 0 0 0 40px !important;
    }
    .wbwishcount {
        display: block !important;
    }
    .wbwishcount{
        right: 5px !important;
        top: -6px !important;
    }
    .headlogo {
        max-width: 100% !important;
    }
    .header__heading-link img {
        max-width: 150px !important;
    }
}

[blockchaingrunt]

almost there Raj. Take a look at my snap shot. Icons a little bigger. all same size and the hamburger menu. But also the menu tap doesn't work, i was working before so maybe a small a just ment to get it that back and we are good. 

[blockchaingrunt]

Update, I got the menu to work by chaning one of your codes to this.

.wbmenuup {
position: absolute;
top: 25% !important;
left: 0;
background: transparent;
max-width: auto;
width: auto;

}

[blockchaingrunt]

I got it my man, took me 4 hours to go over almost the entire base.css file. I made the search and cart icon the same size and figured out how to remove the text "wishlist" by chaning px to 0. what do you think? the more i look at it, maybe its helpful. I've just never used a wishlist ever shopping online. I just joined today so I want to thank you. I owe you cup of coffee buddy. I have other things that pop up I could use help on. I love to learn. 

Search Icon Larger equal to wishlist

.header__icons .icon-search {
width: 25px;
height: 25px;
}

Cart Button Same Size as wishlist and search

#cart-icon-bubble .svgbg svg, .userdrop .svgbg svg {
width: 25px;
height: 25px;
}

[Raj-webdesigner]

And Again Change this Code Because I disappear Your Wish List Name 
So Put This Code In Your old Code In base.css 

@media screen and (max-width:768px) {
    .wishlist a {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0 !important;
    }
    .menuposrow, .wblesf {
        text-align: center;
        align-items: center;
        justify-content: flex-end;
    }
    .header__icons .slidedown_section, #cart-icon-bubble {
        margin-left: 15px !important;
    }
    .wbsetmyuirt {
        flex: 0 0 0;
        max-width: 100%;
        display: flex;
        padding: 0;
        justify-content: end;
        padding: 0 25px;
        gap: 15px;
    }
    .header__icons .wbheadwish {
        padding: 0 !important;
    }
    .header__icons #cart-icon-bubble {
      margin-left: 0 !important;
    }
    .wbmenuup {
        position: absolute;
        top: 25% !important;
        left: 0;
        background: transparent;
        max-width: auto;
        width: auto;
    }   
    .headlogo {
        padding: 0 0 0 40px !important;
    }
    .wbwishcount {
        display: block !important;
    }
    .wbwishcount{
        right: -5px !important;
        top: -6px !important;
    }
    .headlogo {
        max-width: 100% !important;
    }
    .header__heading-link img {
        max-width: 200px !important;
    }
}

[blockchaingrunt]

yup that did that. 

[Raj-webdesigner]

Greate Work 

[blockchaingrunt]

Raj i sent you some coffee brotha, not sure if you got it, i wanted to send you a case but im new to this. In my 50's now so this whole new technology thing is new. I need reading glasses, cant even see much of the codes anymore. Anyways. Enjoy a cup if ya got it brotha. I wanted to send more but couldn't figure it out. I really appreciate your support and hope you support me in the future. I have many ideas for that website. Cheers.

[Raj-webdesigner]

Thankyou For Your Support I Understand Your Filling

[blockchaingrunt]

I also have the same issue on a published site. This one is my development. Maybe if this help to inspect the code. https://www.speedystemecula.com - site looks acceptable but my client is not happy with mobile view. So if i fix this one, I can fix them all. 🙂 Hope im lucky because i don't want to switch back to elementor pro for WP. Trying to learn how build templates on shopify.

[blockchaingrunt]

thank you Imma get you some coffee once i figure out this. thank you Raj. Please be patient as I figure out how to get you cup.

[Raj-webdesigner]

I give This Code You Apply This Code in base.css Old Code upper,

I hope This Code give joy You And Your Client both.

@media screen and (max-width:768px) {
    .wishlist a {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0 !important;
    }
    .menuposrow, .wblesf {
        text-align: center;
        align-items: center;
        justify-content: flex-end;
    }
    .header__icons .slidedown_section, #cart-icon-bubble {
        margin-left: 15px !important;
    }
    .wbsetmyuirt {
        flex: 0 0 0;
        max-width: 100%;
        display: flex;
        padding: 0;
        justify-content: end;
        padding: 0 25px;
        gap: 15px;
    }
    .header__icons .wbheadwish {
        padding: 0 !important;
    }
    .header__icons #cart-icon-bubble {
      margin-left: 0 !important;
    }
    .wbmenuup {
        position: absolute;
        top: 25% !important;
        left: 0;
        background: transparent;
        max-width: auto;
        width: auto;
    }   
    .headlogo {
        padding: 0 0 0 40px !important;
    }
    .wbwishcount {
        display: block !important;
    }
    .wbwishcount{
        right: -5px !important;
        top: -6px !important;
    }
    .headlogo {
        max-width: 100% !important;
    }
    .header__heading-link img {
        max-width: 180px !important;
    }
}

[blockchaingrunt]

Raj i have new post if your interested, i don't know how to do this on shopify. I've been a elementor pro designer for years for WP. I want to create this page or any page with no header and footer for a quick solution for client of mine. I like the idea of this page without header and footer for a customer just type what they are searching for when entering the store. I could just have buttons but im learning what they actually want in this industry and most i find already know what they want when purchasing a vape. So this page without header and footer would be a could start for a kiosk. www.speedystemecula.com/search  here is the link to the post. I'm sure you know what i have an idea for. 

https://community.shopify.com/c/shopify-design/creating-a-page-without-header-and-footer-with-redire...

[blockchaingrunt]

[Raj-webdesigner]

Okay Follow My Step,
1) Follow Arrow In Given Screenshote
https://prnt.sc/fNdmtlEXXgFi
2) Open Coustmize And See Eye and Click On 
https://prnt.sc/VYreVItyqHvY
If You Show Header Open Eye Oherwise Close Eye.

[blockchaingrunt]

i see. but this makes the header and or footer disappear on every page. I thought.

[Raj-webdesigner]

Use This Code For This Link www.speedystemecula.com/search
Add This Code in Your Base.css File

.template-search div#shopify-section-announcement-bar,
.template-search div#shopify-section-header,
.template-search div#shopify-section-footer{
	display:none;
}