Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
uberphotography

Changing CSS for a single page?

Question

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

Edited by danieljs
retag

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 4

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.

Share this post


Link to post
  • 1

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;
}

Edited by Hugh Roberts

Share this post


Link to post
  • 0

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!

Edited by seangabriel

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...