How To Fix Site Header, & Site Navigation Problem On Mobile? Too Much Space On Both.

Solved
Highlighted
Tourist
14 0 3

Hello,

Here is a screenshot of a product page of my store on mobile, for your reference:

 mobile logo 1.png


The header takes up way too much space. It's needlessly thick. How do I reduce that? Basically I want the dark blue section, above and below the site logo, to be reduced to where it takes up less screen space, and more of the artwork is visible sooner, meaning they don't need to scroll down to see it.

Like this:

mobile logo 1.2.png

How do I make that happen?

The next problem is, there is WAY too much space between line 1 and line 2 of the site navigation. Again, it takes up needless space, and it's unsightly. How do I reduce that so it's tightened up?

Like this:

mobile logo 1.3.png

 

Help with this would be greatly appreciated!


Thank you very much!

Anton

0 Likes
Highlighted
Tourist
14 0 3

Also note that this is ONLY a problem on mobile.

This stuff looks fine on desktop.

So I'm needing a fix that doesn't mess with the desktop appearance, but only patches the problem on mobile, if possible.

Thanks again!

0 Likes
Highlighted
Shopify Partner
515 74 108

Please provide website url and if your store is password protected then also provide password

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Shopify Partner
674 109 148

Hello @AntonD,

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

Please share your site URL,
So I will check and provide a solution here.

 

0 Likes
Highlighted
Tourist
14 0 3

My website URL is: https://nextlevelartwork.com/

 

Thank you

0 Likes
Highlighted
Tourist
14 0 3

paramSoft,

The website URL is -- https://nextlevelartwork.com/

 

Thanks

0 Likes
Highlighted
Shopify Partner
515 74 108

This is an accepted solution.

PLease place this code at the end of theme.scss

@media only screen and (max-width: 450px) {
  .site-header .header-logo {
margin: 30px 0px 0px 0px !important;
}
.site-header .wrapper .grid--full .grid-item {
display: none
}
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
14 0 3

You're a miracle worker!

I tweaked the code a bit to make it look slightly different. Basically I removed that second main section of code, that way the site logo was still up there that people could click on to redirect them back to the home page. Pretty standard and expected website design feature. Then I changed that first margin, top margin of pixels, down to zero, and that way the amount of blue space has been reduced to a better-looking size, but the logo is still there.

Any ideas on how to fix the second problem I have? How the site navigation on the page, showing you basically what page you're on and what path you've followed to get there, how there's a ton of space between line 1 and 2? Any way to fix that?

Thanks!

0 Likes
Highlighted
Shopify Partner
515 74 108
.breadcrumb--truncate {
width: unset !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes