How can I hide the logo from the mobile header on the dawn theme?

Solved

How can I hide the logo from the mobile header on the dawn theme?

ErnestoF
Excursionist
44 1 9

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

Accepted Solution (1)

ZestardTech
Shopify Expert
5624 1024 1352

This is an 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;
}
}

 

 

ZestardTech_0-1700212137542.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

Abdosamer
Shopify Partner
836 149 169

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

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
ErnestoF
Excursionist
44 1 9

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

Abdosamer
Shopify Partner
836 149 169

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

PageFly-Henry
Shopify Partner
1184 335 283

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
449 127 93

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

ZestardTech
Shopify Expert
5624 1024 1352

This is an 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;
}
}

 

 

ZestardTech_0-1700212137542.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ErnestoF
Excursionist
44 1 9

❤️

ZestardTech
Shopify Expert
5624 1024 1352

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing