What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I adjust code to start pages below the menu in Ride Theme?

Solved

How can I adjust code to start pages below the menu in Ride Theme?

INFRA
Shopify Partner
163 0 58

Hi there,

 

I've added the below code to make the header transparent but now the content of all pages apart from homepage is starting too high. See image below. 

 

How can I modify this code so the pages start below the menu?

 

website

password: meifay


Thanks so much!

 

Screenshot 2023-11-15 at 11.44.12.png

 

 

 

/* transparent header */
sticky-header.header-wrapper.color-background-1.gradient {
     position: absolute;
     left: 0;
     width: 100%;
     background: transparent;
}

 

 

 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4808 1088 1758

This is an accepted solution.

Hi @INFRA 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% unless template contains 'index' %}
<style>
#MainContent {
padding-top: 12vw;
}
</style>
{% endunless %}

This will add spacing for you unless the homepage

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
10222 1262 1601

@INFRA - add this css to the very end of your base.css file and check, also please note thaat this css will change home page as well, but it do not have any separate id or class to have different css

 

@media screen and (min-width:750px){
main#MainContent {margin-top: 100px;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

PageFly-Richard
Shopify Partner
4808 1088 1758

This is an accepted solution.

Hi @INFRA 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% unless template contains 'index' %}
<style>
#MainContent {
padding-top: 12vw;
}
</style>
{% endunless %}

This will add spacing for you unless the homepage

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

INFRA
Shopify Partner
163 0 58

HI Richard, thanks for the solution, I've just noticed it only works on desktop though. Can we get it to work on mobile too? 

Dan-From-Ryviu
Shopify Partner
10340 2052 2135

Hi @INFRA 

Go to your Online store > Themes > Edit code > open theme.liquid, add this code before </head> tag to add space for other page then homepage/

{% if template == 'index' %}

{% else %}
#MainContent { margin-top: 135px !important; }
{% endif %}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ZenoPageBuilder
Shopify Partner
1052 203 227

Hello @INFRA 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

 

#MainContent {
    padding-top: 120px;
}

 

The result

Screenshot 2023-11-15 at 09.30.47.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
INFRA
Shopify Partner
163 0 58

this removes the transparent header on the homepage though, can we exclude the homepage from this?