Remove logo on just one page?

I am trying to remove the logo header from one page, but not knowing CSS is making it tricky! I managed to find the code to remove the nav on my home page which worked perfectly, can anyone tell me what the logo is called in CSS, or if the code format below is correct? Many thanks.

This worked:

body.homepage #main-navigation {
 display: none !important;
}

This isn’t working:

collection-516572a5e4b0dc29aed91cfb #logo {
 display: none;
}

Many thanks,
Jennifer

Assuming you are also trying to hide the logo on the homepage, use basically the same code, but just swap in #logo for #main-navigation. So this will hide the logo on the home page:

body.homepage #logo { display: none }

… which means “do not display an element with an ID of logo if it is inside a body element with a class of homepage.”

Your second block of code looks to be missing a “#” like so:

#collection-516572a5e4b0dc29aed91cfb #logo { display: none }

… which means “do not display an element with an ID of logo if it is inside another element with an ID of collection-516 … etc.”

The most important thing with learning CSS is to learn your selectors. A “#” in front of a name means the name is an ID, which can only be given to one element per page. A “.” in front of a name means it is a class, which can be given to an unlimited number of elements per page. If there is no “#” or “.” in front of a name, that means it is a tag, i.e. body or p or a. If you understand those 3, you are almost halfway to knowing CSS.

A full description of selectors is here: CSS Selectors.

The other half of CSS is the properties, which you can find here: CSS Reference.

… it all looks extremely confusing at first glance, but it is actually fairly simple once you get used to looking at it.

To create a CSS rule (a line of CSS) all you do is put one or more selectors, then an opening brace { and then one or more properties, separated by semi-colons, and then a closing brace } and you have created one rule. The rule simply applies those properties to whatever the selector selected.

That really is about 75% of all you need to know about CSS. It just takes a little practice and seeing it in action to realize how simple it actually is.

Could it be that Jennifer removed the opening hash, because without the 4 spaces at the beginning they turn the line into a title?

This can also do the trick — Add this to the Advanced Tab within the specific page's settings:

<style>
#logoImage{
display: none
}
</style>

I know this is an old thread, but here's the solution I used:

Inject this code into the page you want:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(function() {$('#logoImage').find('img').attr('src', '<urlofimagegoeshere>')})
</script>

This code both finds the logo image and replaces it, since it's somewhere in the h1 id/class which is two levels up.

This worked for me on the Bedford Template. Change #logoimage to whatever the img element is for your template since there is no element id (must be a squarespace thing). You can find this by right clicking the img in Chrome and using "inspect" for all newbies out there.

Good luck!

Thank you Sly for this detailed response. Those this thread wasn't specific to my need, your answer led me to learn a good bit about how to solve my problem!Andy

I'm trying to remove the logo and tagline from all pages except the home page? Does anyone know what CSS code will do that in the Galapagos theme?

Thanks!

Hello!I am still having a bit of trouble isolating what the img element is in my template. the site is https://justinkellycontracting.squarespace.com/ and I am trying to remove the logo from just the home page there.

i did inspect on the element and got:

<img src="//static1.squarespace.com/static/592762ae197aea91f0fbfef3/t/59291d036a49632894ff1e1c/1497071129687/?format=1500w" alt="Justin Kelly Contracting" class="Header-branding-logo" id="yui_3_17_2_2_1497073100274_618">

@JKC

It seems you are using the Brine template family like me. Here is the code, place it in the index or page header code injection:

<style> .Header-branding img {display: none !important;} </style>

I have tried to use this code on my pages, in Squarespace it looks nice, but out on the WWW the logo is back!

https://info.meiplasticvrij.be/plogging-day-2

Or actually, I have used the code mentioned by curtis594... But somehow the logo is still there! I hope you can help me?

https://info.meiplasticvrij.be/plogging-day-2

Hi there, I am working with the Artesia template and want to remove the logo on the main homepage, but above custom code does not work for me... any other ideas? Thanks, Jane