Transparent Header with Pagefly on Brooklyn Theme?

Store Design
1

Hi Shopify-Community :slightly_smiling_face:

Maybe someone can help me out?

I love the transparent header option of the Brooklyn-Theme on Shopify, but now that I am working with Pagefly additionally, I cannot find a way to do that. Basically, I want the Navigation-Header made on Shopify displayed on the first element of the Pagefly-page (a slideshow).

Maybe it is not possible at all because the Pagefly editing area start just underneath the header?

Thank you for your time and help!

2

Hello, @LagunFinder

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

1 Like
3

Hi @Hardik29418 ,

thanks for your quick response.

The website URL is https://lagunathelabel.com/password. I will sent you the password privately :slightly_smiling_face:

Thank you SO much, your help is greatly appreciated!

1 Like
4

Hello @LagunFinder

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

.site-header {
    background-color: transparent !important;
}
.main-content {
    margin-top: -122px;
}
1 Like
5

Hello and thanks again, it worked!

There is just a little light line still from the pagefly background, any idea how to get rid of that? Maybe increase or decrease the margin top?

1 Like
6

Also, is it possible to create this transparent header only for the homepage? Hope this is not too difficult.

THANK YOU! :slightly_smiling_face:

1 Like
7

@LagunFinder
Please remove my old code and Go to Layouts → theme.liquid and place this code between 

{% if template.name == "index" %} 

{% endif %}
1 Like
8

Being not super confident and experienced with code, I need to ask: Where exactly do I need to put your code? You said between , is that in line 75?

Thanks so much!

9

Please place code before

1 Like
10

Thanks again, for the 1000th time! Your help is really appreciated!

The whole navigation is a now higher on the homepage than on other pages, it basically jumps a bit up.

Is there are way to keep the same level for the navigation?

11

@LagunFinder I could not get you. Please explain more.

1 Like
12

Sorry for being unclear, let me try again :slightly_smiling_face:

When you are on the Homepage, you can see that the whole navigation (Logo, “Shop”, “Site Guide” etc.) is pretty high up and touching the Announcement Bar. When you click on another page, e.g. “Shop” the navigation drops a little bit. So you can see that the Logo is not touching the Announcement bar anymore, there is now a bit of space in between.

Is there a way of adjusting the height so the logo and the other buttons are on the same level and don’t jump up/down?

Thanks for your help!

13

@LagunFinder

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

{% if template.name == "index" %} 

{% endif %}
1 Like
14

Unfortunately, nothing has happened adding this code.

Is there another way for the header (logo, navigation) on the homepage to be on the same level as on other pages? I would prefer to edit the homepage and not the other pages - the logo is a good guideline: I don’t want the logo to touch the announcement bar, I prefer the height on the other pages.

Thank you very much for your help, I appreciate it a lot!