DangDang

@tuanphan I fixed it but not the way I wanted. I managed to make the header transparent on the front page and disable scrolling. However, on the sub-pages, the header is fixed but not transparent - ideally I would like it to be transparent (but still fixed) there as well! So if you have any ideas, please let me know!

@Ziggy Wow, that was it! That piece of code was needed before but is actually redundant now. Thank you!

These are my current settings, but I've tried playing around with these and the problem is that no matter what settings I choose, the grid starts a bit down in the footer, which is what makes the space between the footer and the section above it so big.

I want to reduce the space before the footer on all of my pages. I tried several code snippets from similar threads but none of them have worked so far. Anyone knows if there is a specific case for my page? While editing, you can see that the section is quite spacious, and the grid doesn't start on top of the footer - meaning that I can't simply move the text upwards.

Solved it! Finally found codes in old threads that works for both problems (transparency of header and invert burger menu on home page), thank you @tuanphan If anyone has a similar problem, here you go: Transparent header: header#header { background-color: transparent !important; } article section:first-child { padding-top: 0px !important; } White burger menu on homepage: body.homepage .burger-inner>div { background: white !important; }

I'm trying to make my header transparent but can only manage to make it transparent lower on the page or when scrolling - when landing on the page or when page is scrolled to the top, the header is solid. See screenshots below, first one is on the homepage before scrolling, second one is the homepage after scrolling down. The second one is how I want it to be. The header is Fixed>Basic and with the following settings: With help from this forum, I managed to do this with the following code injected into the header settings of the homepage: <style> .page-section.gallery-section{padding-top:0px!important;} </style> However, that piece of code + the code for making the burger menu only works as injection, and I'm on the personal plan. Since I have no other reasons to switch to the business plan, I'm trying to find a way to do it with other means, only using settings and/or CSS. Any ideas?

Yes, that's what I ended up doing! Switching the sections so the mobile version moved up into the header space, and added three rows in the top of the section

@skycircle please let me know if you find a solution to this! I'm trying to do the same thing. Unfortunately the code from Ziggy's link doesn't work, as far as I understand that code is more about grid galleries than slideshow.

I'm working on a site where I want different text sections to show depending on whether it's displayed on mobile or desktop. To achieve this, I use code from @tuanphan found on this forum: /* Hide this on Mobile */ @media screen and (max-width:767px) { section[data-section-id="65a90fba666ba066ad4a4ee9"]{ display: none; } } /* Hide this on Tablet - Desktop */ @media screen and (min-width:768px) { section[data-section-id="65a90ce4531574783e83ad15"] { display: none; } } In both cases, it works to hide one of the sections for the media format in case. However, on desktop, it also causes the text section to move up into the header space (see screenshots, the lower one is a reference for how the rest of the projects looks, which is how I want it) - something that hasn't been an issue before on the site. What might the problem be here? The mobile version looks good.

That solved it! Exactly what i needed, thank you!

@tuanphan I want it to be black (see attached image) like this on the overlay menu, as well as all pages except the home page: To summarize: The only place I want it to be inverted is the homepage, and the problem I currently have is that when I invert it on the home page, it becomes inverted on the overlay menu as well - when accessing the overlay menu from the home page. The logo is black when accessing the overlay menu from the other pages, but I want it to be black even when accessing the overlay menu from the home page.

If it’s not possible to not invert the logo in the overlay menu, i guess a workaround might be to have another file as the logo only for the overlay menu. Then I can upload the black version and try to resize it to fit the normal header logo (which I upscaled in squarespace). Anyone have any suggestions for how to do this?

@tuanphan thanks for the answer! Unfortunately, it had the opposite effect - with that code it looks like this when accessing the overlay menu from all pages (before, it was fine in all pages except the home page).

I have a black logo on my website which I managed to invert to white on the home page, with help from other threads in this forum. Works great with the slideshow, the only problem is on the mobile version. When I access the burger menu (which is white) from the homepage, the logo looks weird/semi-transparent. If I access it from the other pages on the site, it's black, which looks better. See screenshots below The CSS code I used for inverting the logo on the homepage is the following: body[class*="home"] header#header img { filter: invert(1) !important; -webkit-filter: invert(1); }

On my homepage, I have a slideshow with full bleed below a transparent header. I'm struggling with a code to make this header to stay fixed, but still keep the transparency. When I set it as fixed, the header background becomes white when scrolling. The header settings are set as Dynamic in Style, and fixed>basic. I tried adding the code from this thread, but it didn't work. Grateful for any help!