Removing Tagline Area on Simple Theme

Solved
TRS
New Member
3 0 0

Hello, not sure if this has been discussed (i couldn't find any search results)

 

So, I use the SIMPLE Shopify theme, and I am not using the Tagline space in my header area. 

I want to remove this white space area completely, and bring the rest of the page up so it's level, removing all the big noticeable gap.

 

See here - trsrecords.info

 

As you can see (from the desktop view) there is big white gap, and I want to remove this entirely. 

 

Thank you, hope it's a simple fix.

 

 

 

0 Likes
JavierSanz
Shopify Partner
35 5 7

👋

 

So if I get that right, you mean the top blank area above your "Newsletter" text? Can you confirm?

 

Screenshot 2020-03-07 at 20.17.17.png

0 Likes
TRS
New Member
3 0 0

Exactly!

That white space above the Newsletter.

Is it possible to remove that entire sections (where the tagline would normally be)?

Would this also bring up all the other sections, so it's tidy?

 

Thanks for the reply! :)

 

0 Likes
JavierSanz
Shopify Partner
35 5 7

This is an accepted solution.

Ok got it,

 

I'd try something via custom CSS. Go to https://yourSHOP.myshopify.com/ > Themes > Edit code > Open your theme.liquid and find this line:

 

<main class="main-content grid__item medium-up--four-fifths" id="MainContent" role="main">

And just before that line, paste this:

 

      <style>
  .main-content {
    margin-top:-8em;
  }
        
@media only screen and (max-width: 500px) {
  .main-content {
    margin-top:inherit;
  }
}
      </style>
TRS
New Member
3 0 0

PERFECT!

 

Thank you so much for this :)

You've been a great help!

 

 

0 Likes
Kevin333
New Member
1 0 0

This solution is great but is there a way to only do this change for the Home Page screen and NOT the Collections & Products screens?

0 Likes
HelloPaul
Tourist
26 0 1

Thanks! I had the same question, and this removed my store's header nicely.

0 Likes
123petter
New Member
1 0 0

Thank You this article is very helpful i have just add  {.main-content { margin-top:-8em; }  code is working. 

 

 
0 Likes