decrease header height mobile

Solved
Highlighted
Excursionist
32 0 2



header mobile.JPG

 

i want to decrease header height for mobile viewing only
https://giochiegiocattolionline.myshopify.com/
password :hilary

0 Likes
Highlighted

This is an accepted solution.

Hello @alexehilary,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss

@media screen and (max-width: 768px) {
#shopify-section-header .header-logo {
    margin: 0 auto;
}
#shopify-section-header .site-header {
padding-bottom: 0;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
32 0 2

hi ! thank you !

0 Likes
Highlighted
Excursionist
32 0 2

Is it possible to decrease the height again? It's still very big

0 Likes
Highlighted

Hello @alexehilary 


Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 768px) {
.site-header .header-logo .header-logo__image {
	width: 100%;
	max-width: 85px !important;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
32 0 2

headermobile.JPG

from mobile, it would be perfect, this height and how is it possible to insert the search in this way?
placing the logo on the left

0 Likes
Highlighted
Shopify Partner
41 1 5

Hi @alexehilary,

Yes it's possible with some custom Liquid and CSS code. I've sent you a collaboration request, once you accept the request I'll be able to make change to your theme file. 

Or you can use this code but the search bar will not be in the desired place (Below the logo)

.grid-item .search-bar {
display: inline-block !important;
}

Umair Abbas

Need more help? Shot me a message through live chat on my website YoFlare.com
Was my answer helpful? Hit like ♥ and Accept Solution ☑
Hire me for ✔ Theme modification ✔ Bugs fixing ✔ Store Development ✔ Custom coding
✔ OnSite SEO ✔ Conversion Optimization ✔ Speed Optimization
At the most affordable rates
0 Likes
Highlighted
Excursionist
32 0 2

there have been no changes with this code
wait for help in the forum, if possible...

0 Likes
Highlighted
Excursionist
32 0 2

hi can I have some help on how to decrease the height

0 Likes