Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
jenmnicol

Remove logo on just one page?

Question

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

Edited by danieljs
retag

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 4

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.

Edited by Sly
W3Fools.com

Share this post


Link to post
  • 2

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


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

Share this post


Link to post
  • 0

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


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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">


Edited by JKC

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...