Jump to content

Changing CSS for a single page?

Recommended Posts

I created a splash page (www.uberphotography.com.au) and since this page links to several different websites I don't want to have the site navigation visible on this page.I have been able to use the CSS editor to remove the navigation using:


#main-navigation {
 display: none;
}
#mobile-navigation {
 display: none;
}

However this removes the navigation from the whole site which I obviously don't want. So when I go to http://uberphotography.com.au/home I still want to be able to see my navigation so I can move around the site.

So question is how do I apply this CSS change to only one page??

Thanks!Chris

Link to comment
  • Replies 11
  • Created
  • Last Reply

Every page has a unique ID ...


 <body id="collection-5084754b0f4598aa96c7f"


... so you simply need to put that ID in front of your CSS.


#collection-5084754b0f4598aa96c7f #main-navigation {
 display: none;
}
#collection-5084754b0f4598aa96c7f #mobile-navigation {
 display: none;
}

Hope this helps!

I'm Krystyn Heide, a designer and developer living in New York City.

Link to comment

Here is what I did for KingdomJourneys.org

Good luck.


.homepage #content { width: 1000px }
.homepage #logo,
.homepage #footer,
.homepage #wrapper,
.homepage #bannerImage { display: none }
.homepage {
 background: url('URL') no-repeat fixed center top #000;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0;
 z-index: -1;
}
.stretch {
 height: 100%;
 width: 100%;
}
.homepage #topNav {
 background-color: #000 ! important;
}
.homepage #topNav a {
 color: #fff ! important;
}
.homepage #header {
 background-color: #000 ! important;
}
.homepage #mobileNav {
 background-color: #000 ! important;
}
.homepage #mobileMenuLink {
 background-color: #000 !important;
}

Link to comment
  • 1 year later...

A few follow up questions:

  1. Any thoughts on suppressing page titles on a select number of page?
  2. Are we inserting this code into the Page Header Code Injection box at the page level, or in the Custom CSS Editor?

I’ve tried dropping this code into both places, but no luck so far, using Adirondack template, trying to suppress page titles on all pages except gallery pages.

#collection-523d4268e4b05da141071341 #page-title { display: none }

Thank you!

Link to comment
  • 7 months later...

Hi @krystynheide , I'm trying to apply this code with custom css to only my shop page with no luck.

.content-inner.has-content { padding: 100px 0%; } .content-inner { padding: 0; } .content-inner { background-color: #fff; max-width: 100%; margin: 20px; padding: 20px; }

My page id is:collection-54a7b93ce4b04f1bf4c9fbeb

I tried to add it to header code injection but then it did also apply to the individual product pages, which i don't want haha.

I've tried for hours now to get this to work..Hope you could help me out :)

Thanks,Pontus

Link to comment

haha you're right @benjamin.. i'll open a new one next time. strange i can see the code you wrote in my email notification but not here? anyhow it still does not work with the code you gave me:

collection-54a7b93ce4b04f1bf4c9fbeb .content-inner.has-content { padding: 100px 0%; } .content-inner { padding: 0; } .content-inner { background-color: #fff; max-width: 100%; margin: 20px; padding: 20px; }

It still applies to all pages..

thanks

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

Archived

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

Guest
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.