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

How can I hide parts of a page?

Question

I am trying to create a homepage with just an image which can be clicked on to direct to another page. I’d like to hide the navigation bar on the homepage so all that shows up is the image.

Has anyone had any success with adding CSS to accomplish this? I found this question asked before (Hide navigation on only the homepage?), but it didn’t work for me.

FYI, this is the website: http://www.pannimalekzadeh.com/ As you can see, I already have the clickable image on the homepage, but I’d like to find a way to hide the top navigation on this page.

Thanks! Justin

Edited by justinrome
Make even more general

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

Going Fishing

All of the major web browsers come bundled with developer tools, with just a few clicks we can find the CSS selectors that are unique to the part of the page we want to change*.

*Apple’s Safari requires a bit more work, go into Safari’s Preferences > Advanced and enable “Show Develop menu in menu bar”.

  1. Right click on or near the part of the page you want to hide.
  2. Select Inspect Element.
  3. In the developer tools you will see the HTML elements that make up the page.
  4. Each time you select a different element, the corresponding part of the page is highlighted. We simply need to narrow down the part of the page that holds the content you want to hide.

     

    Using the web browser’s developer tools to find an element on the page

    • Think you’ve found the part of the page you want to hide?
    • Hit the delete key (or right click > Delete Node), that bit will disappear.
    • Got the wrong bit? Never mind.
    • Got the right bit? Great!
    • Hit the undo (control-z on Windows, command-z on OS X), if you didn’t get the right bit carry on from step 4
    • And if you did get the right bit, we’re nearly there.
  5. See this bit in the code: id="headerWrapper"? Briefly: an ID is unique, there is only one element on the whole page with this ID, this makes it ideal to target. When we target IDs, we use the hash symbol (#), classes are called with a dot (.), you’ll notice that further down there are two classes: <div class="logo site-title">…
  6. After a bit of clicking around we have identified headerWrapper, because it’s an ID, in the selector we call it by #headerWrapper.

Hiding…

With some simple CSS you can do great things, one of which is the power to hide elements. Using the ID that we have found, we can put something like this together:

#headerWrapper { display: none !important }

The property (display) and value (none) simply says we want to hide this chosen bit of CSS, the !important says definitely do it (CSS can get quite gnarly, I suggest reading up on the use and misuse of !important).

Hiding on the Homepage

Great, but now this part of the page will be hidden on every page. Luckily the homepage <body> element has its own unique class, homepage, and if you remember from before, classes are called with a dot, so to use it in a selector, we call .homepage.

So we add that to what we learned before:

.homepage #headerWrapper { display: none !important }

Hiding on any Page

And what if you want to make these changes on something other than the homepage? You would just substitute .homepage for the unique collection ID, see How do I locate the page ID?

A Compulsion to Hide

You need to hide a few more things on the homepage? Easily done.

  1. Go back to step 1 of finding elements on your page (“Going Fishing”).
  2. Once you have those elements, add them as follows:
    
    
    .homepage {  #headerWrapper, #footer, .sidebar {    display: none !important  }}

  3. See how each ID or class selector is listed, separated by commas? Make sure there’s no comma after the last one (in this example: .sidebar {)
  4. Add your CSS to the Custom CSS Editor and you’re done!
Edited by neeklamy
Add info about non-homepages

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

@neeklamy

I inserted the following and it didn't work (btw this is not the page so I used the collection ID):

.collection-5ab42c6e758d46d6fb355310 #header { display: none !important }

Can you tell me if I need to fix something?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...