Solved

My titles are being cut off from the header

lukeeys
Excursionist
24 0 5

Hi Shopify friends, hope your having a good day 🙂

 

I'm having a small issue - I had my header merged in so it flows with my banners a while ago. I'm finding that since then when you go onto the page the titles are always cut off and can't see the titles.

 

Can someone please help with this?

 

I've attached some screenshot to show what I mean.

Screenshot 2024-05-17 at 18.31.56.pngScreenshot 2024-05-17 at 18.32.03.pngScreenshot 2024-05-17 at 18.32.12.png

Many thanks in advance😊

Accepted Solution (1)

conversionist
Shopify Partner
55 7 9

This is an accepted solution.

To fix this you can add some custom CSS to create space Here's how:

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Open your theme.css or theme.scss.liquid file in the Assets folder.
  3. Add this code at the end:

 

.header-merged + .main-content {
    padding-top: 100px; /* Adjust this value as needed */
}
​

 

Save the changes and refresh your site This should add enough space for the titles to be fully visible

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/

View solution in original post

Replies 5 (5)

conversionist
Shopify Partner
55 7 9

This is an accepted solution.

To fix this you can add some custom CSS to create space Here's how:

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Open your theme.css or theme.scss.liquid file in the Assets folder.
  3. Add this code at the end:

 

.header-merged + .main-content {
    padding-top: 100px; /* Adjust this value as needed */
}
​

 

Save the changes and refresh your site This should add enough space for the titles to be fully visible

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/

kaiyaa
Explorer
254 19 24

Hello @lukeeys 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
main#MainContent {
    padding-top: 100px;
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
lukeeys
Excursionist
24 0 5

Thanks so much 😊 so pleased with it 

lukeeys
Excursionist
24 0 5

Screenshot 2024-05-17 at 20.28.55.pngScreenshot 2024-05-17 at 20.29.05.png

lukeeys
Excursionist
24 0 5

Hi Kaiya,

 

One last thing, the drop down menu on main bar shows clear and cant see the font. Do you know how to make this drop down filled so you can see the font?

 

Screen shot attached Screenshot 2024-05-17 at 20.28.55.pngScreenshot 2024-05-17 at 20.29.05.png

Many thanks in advance.