Jump to content

Remove logo on just one page?

Recommended Posts

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,

Link to comment
  • 9 months later...
  • Replies 11
  • Views 30.9k
  • Created
  • Last Reply

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.

Link to comment
  • 8 months later...
  • 1 year later...

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">
$(function() {$('#logoImage').find('img').attr('src', '<urlofimagegoeshere>')})

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!

Link to comment
  • 3 months later...
  • 3 weeks later...
  • 1 year later...

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

Link to comment
  • 2 weeks later...
  • 10 months later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.