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

[INFRA]

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!

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

[suyash1]

@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;}
}

[PageFly-Richard]

Hi @INFRA

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

{% unless template contains 'index' %}

{% endunless %}

This will add spacing for you unless the homepage

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[Dan-From-Ryviu]

Hi @INFRA

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

{% if template == 'index' %}

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

[ZenoPageBuilder]

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

Hope that helps!

[INFRA]

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?

[INFRA]

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