Debut Theme - Move page title down on all pages

Solved
Excursionist
34 0 3

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!!! 

 

 

 

Screenshot 2020-11-25 at 11.59.02.pngIMG_F87021AD465A-1.jpeg

0 Likes

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

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
Shopify Staff
Shopify Staff
1525 152 438

This is an 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

 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Excursionist
34 0 3

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. 

0 Likes
Shopify Staff
Shopify Staff
1525 152 438

This is an 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 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Excursionist
34 0 3

Perfect!!  Thank youuuuuuuuu

0 Likes
Excursionist
34 0 3

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. 

IMG_6997.PNG

0 Likes
Excursionist
34 0 3

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 

0 Likes
Excursionist
34 0 3

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. 

IMG_87C891BCCA6C-1.jpeg

0 Likes
Excursionist
34 0 3

Also the search results page please. 

IMG_B119F3FF0370-1.jpeg

0 Likes