Jump to content

How can I hide parts of a page?

By justinrome, in Customize with code

Go to solution Solved by neeklamy,

Recommended Posts

justinrome Level 2

justinrome

Posted
Posted (edited)

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
Link to comment
  • Replies 6
  • Views 21.9k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
neeklamy Level 5

neeklamy

Posted
  • Solution
Posted (edited)

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. 

  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. 

  4. Add your CSS to the Custom CSS Editor and you’re done!
    5. 



			
				


	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.

		

	


		
	


	

	





	
Link to comment

	
		
	
	
	

	





	



					
					
					
				

					

					
					





					
						
    
							
							
								
  • 
									4 years later...
								
    • 
							
						

					
					
					
				

					

					
					






	

	

	

		

			

				

	
		Guest
	

				
				
			

		

		

			

				


Guest
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

@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? 



			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	





	



					
						
    
							
							
								
  • 
									1 year later...
								
    • 
							
						

					
					
					
				

					

					
					





					
						
    
							
							
								
  • 
									2 years later...
								
    • 
							
						

					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		tuanphan
		
	

				
				
					
						
Level 17
					
				
			

		

		

			

				


tuanphan
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

	

		On 9/28/2021 at 2:40 AM, dovely said:
	


	

		

			Hi @tuanphan I wonder if you'd be able to help us figure this one out.


			We are trying to hide the top section on this page and have tried similar code mentioned above with no success. Any insight you have would be greatly appreciated. Thank you!
		


		

			Screen Shot 2021-09-27 at 2.38.35 PM.png
		

	






	Add to Design > Custom CSS




body#collection-6114426bcd26b83d83211c4b .page-banner-wrapper {
    display: none !important;
}




	 




			
		


		

		
			

	

		

		

			

	Email me if you have need any help (free, of course.). Answer within 24 hours. 

	Or send to forum message





	Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)



		

	


		
	


	

	





	
Link to comment

	
		
	
	
	

	





	



					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

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

			
	
			

				Sign Up / Login
			

		

	



			
		

	

	
		

			
				

					


				

			
			

				




			

			
		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


	

		
			


    
News

    


		
		
			
			

		
		
		


	


				

			

			
		

		
		



	

		×
		


    
	





			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	




		
		

	
	




































	
















		
		
		
		
		
		
     
      	






      	



      	

      		

      			

      				

      					

      						

      							
      						

      						

		      					
Squarespace Webinars

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

		      					
Upcoming Webinars →

		      				

	      				

      				

      				

      					
Hire a Designer

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

      					
Get Matched →

      				

      			

      		

      	

      
		

          	
          	

                

                    
Support 


                    
                

                

                    
Community 


                    
                

                

                    
Developers 


                    
                

                

                    
Resources