Hide logo from header only on mobile

[ErnestoF]

Hello. Is it possible to completely hide the logo on the mobile version of the dawn theme? I still think the logo takes up too much screen space on the mobile version of the site. I would like only the menu bar to be visible without the logo. Then the bar would be narrow and contain only the search engine and the opening menu. I wanna hide logo only on mobile. 

https://5a8ab2.myshopify.com/
123

[Abdosamer]

Hi @ErnestoF , Go to base.css and add the following code :

@media (max-width:768px){
   .header__heading-logo {
    height: auto;
    max-width: 100%;
    display: none;
}

}

[ErnestoF]

It doesn't work 😞 i also did it like -> display: none !important; but it also has no effect

[Abdosamer]

@ErnestoF , the code should work, I can send you access request if you are having trouble with the code.

[PageFly-Henry]

Hi @ErnestoF 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

img.header__heading-logo.motion-reduce {

    display: none !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Anshul_arora]

Hello @ErnestoF ,

Yes, you can hide the logo of your store for different screens such as mobile, ipad.

Please add the below mentioned code in you store' .css file (base.css)

@media screen and (max-width:820px)
img.header__heading-logo.motion-reduce {
display: none;
}

After adding the code, it will hide the logo for mobile screens https://prnt.sc/-hoZbKn_iwFi  and ipad screens https://prnt.sc/8fbn-2koqPw8

Make sure to add the complete above mentioned code in your .css

[Note - If you looking to hide logo only for mobile screen , not for ipad screen then only change the max-width px in the above mentioned code to 'max-width: 520px']

I hope it helps.

Please let me know if you have any query or need any assistance.

Thank you.

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the TOP of the file:

@media (max-width:992px){
.header__heading-logo {
display: none;
}
}

[ErnestoF]

❤️

[ZestardTech]

Hello @ErnestoF 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful then please Like and Accept Solution.