Logo overlaps heading in mobile view - Debut Theme

Solved
Highlighted
Tourist
7 1 3

Hi all,

I changed my navigation to be transparent over the banner image at the top of my site. No issued with desktop, however when I go to mobile the logo to too large and it overlaps my heading text on the banner. Can anyone point me to where I can reduce the logo size for mobile only?

 

Secondarily, because of the navigation changes I made, when I click the hamburger in mobile, my navigation items seem to disappear behind the banner image, rather than being seen.

 

URL: theplantchica.myshopify.com

password: plantbased

 

Thanks in advance for your help!

 

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

Hello, @theplantchica 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header {
width: 100%;
}
.mobile-nav-wrapper {
z-index: 9;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Explorer
119 19 28

This is an accepted solution.

follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

@media(max-width: 749px) {
	.site-header__logo img {
		width: 60px;
	}
	.site-header__mobile-nav {
		width: 100%;
		display: block;
	}
	.mobile-nav-wrapper.js-menu--is-open {
		z-index: 88;
	}
}

 

My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageBuilder App.
shopify.expert.team@gmail.com
0 Likes
Highlighted
Tourist
7 1 3

This is an accepted solution.

@Michael_Pink genius, mate. Thank you!

0 Likes
Highlighted
Tourist
7 1 3

@Michael_Pink one more question, as none of the coding I have found has worked...

What's the easiest way to add my logo to the bottom left section of the footer? 

 

Thanks!

0 Likes
Highlighted
Explorer
119 19 28

To make the logo footer on debut theme.
You need to update in the theme code.
mail for me if you want to make it.

My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageBuilder App.
shopify.expert.team@gmail.com
0 Likes