Debut Theme - Move page title down on all pages

[MandyLT]

Hi,

I'd like to know how to move my page title down on all pages please.  

I attach screenshots below.  As you can see on the desktop version the title 'Privacy Policy'  is close to the top of the page, but on the mobile version part of the text is cut off by the sticky header bar.  

Please could someone let me know how to move the title down on the page on both desktop and mobile views?  The title might need adjusting at different rates depending on the screen it is being viewed on, so it would be good to be able to move it down independently depending on screen type. 

Thank you in advance.  This forum is so helpful!!! 

[oscprofessional]

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

[Bo · Accepted solution]

Hey there, @MandyLT 

Bo here from Shopify Support!

That is a great question and I am so glad you find this forum so helpful! Some space can be added to the page headers by adding some CSS to the bottom of the theme.scss.liquid. 

**NB** When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

Steps:

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the Assets folder > theme.scss.liquid. 

3. Scroll to the very bottom of the file and paste the following code:

.section-header {
    padding-top: 20px;
  }

You can change the amount of space by changing the number before px, use a higher number for more space or a lower number for less space.

3. Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo

[MandyLT]

Hey Bo, 

Thanks so much!! That worked perfectly  

Is there a way to change the mobile version independently?  I think the mobile version needs slightly more padding than the desktop version. 

Thanks again.  Mandy. 

[Bo · Accepted solution]

My absolute pleasure, Mandy!

1. To edit the mobile version add the following under the code you have already added: 

   @media only screen and (max-width: 749px) {
 .section-header { 
    padding-top: 50px;
  }
    }

2. Click Save. 

The finished code should look like this:

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo 

[MandyLT]

Perfect!!  Thank youuuuuuuuu

[MandyLT]

Hi Bo, 

I have added my shop policies and the titles of these pages are too high up on the mobile version and not affected by the previous code you kindly provided.  Do you know the code to move these titles down please?  Thanks in advance. 

[MandyLT]

Hi Bo, 

ignore my last message.  I have moved the shop policies over to pages i have created.  The titles then work using the code you gave me.  Thanks 

[MandyLT]

Hi Bo, me again!  

I need to move the title down on the account login page.  Do you know the code for this please?  Thank you in advance. 

[MandyLT]

Also the search results page please.