Solved

Customizing my header design for mobile devices

blockchaingrunt
Shopify Partner
19 0 3

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. 

 

after.jpgbefore.jpg

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
236 52 53

This is an 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;
    }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

View solution in original post

Replies 27 (27)

Raj-webdesigner
Shopify Partner
236 52 53

I will help you anyway

What kind of help do you need?

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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 after.jpg

Raj-webdesigner
Shopify Partner
236 52 53

Hello,

Can you remove this Text show in screenshot

Rajwebdesigner_0-1711471195955.png

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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

blockchaingrunt
Shopify Partner
19 0 3

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

Raj-webdesigner
Shopify Partner
236 52 53

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;
    }
}

 

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Raj-webdesigner
Shopify Partner
236 52 53

Please Put Again

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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
Shopify Partner
19 0 3

if you tap the menu, it went away too.

Raj-webdesigner
Shopify Partner
236 52 53

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

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Raj-webdesigner
Shopify Partner
236 52 53

This is an 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;
    }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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. jpeg.jpg

blockchaingrunt
Shopify Partner
19 0 3

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
Shopify Partner
19 0 3

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
Shopify Partner
236 52 53

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;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

yup that did that. 

Raj-webdesigner
Shopify Partner
236 52 53

Greate Work 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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
Shopify Partner
236 52 53

Thankyou For Your Support I Understand Your Filling

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

blockchaingrunt
Shopify Partner
19 0 3

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
Shopify Partner
19 0 3

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
Shopify Partner
236 52 53

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;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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
Shopify Partner
19 0 3

kiosk.jpg

Raj-webdesigner
Shopify Partner
236 52 53

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.

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
blockchaingrunt
Shopify Partner
19 0 3

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

Raj-webdesigner
Shopify Partner
236 52 53

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;
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com