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

Remove navigation and site header

Question

Hi, I would like to remove the navigation menu and header of one of my pages so that the visitor can only see a gallery slideshow. If it is possible I would also like to have the gallery appear as bis as possible on the screen.

Using CSS, could anybody give me some tips on how to do this?

The answer to this similar question was recommended to me but unfortunately I don't understand it.... http://answers.squarespace.com/questions/7550/hide-navigation-on-multiple-individual-pages

Edited by steeboy

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 2

You can hide the header from that page by going to that page and then going Manage Site > Page Settings > Advanced and pasting this CSS into the Page Header Code Injection (be sure to include the style tags)


<style>
#header { display: none; }
</style>

I’m not sure if this CSS will make the gallery stretch the width of the page, but try adding this below the #header line (but above the </style> tag):

#site > .wrapper { max-width: 100%; width: 100% !important; padding: 0; }

The final code would look like this:


 <style>
   #header { display: none; }
   #site > .wrapper { max-width: 100%; width: 100% !important; padding: 0; }
</style>

Let me know if that code stretches the gallery, if not, I’ll see if I can figure it out.

Edited by kale

Share this post


Link to post
  • 2

It looks like it is almost working for you -- I've added another piece to the CSS to fix / remove the scroll bar -- setting the padding to 0px should fix that.

See my answer above for the new version of the code.

Share this post


Link to post
  • 1

Also, if you want to remove the blank space above the gallery, add these two lines of CSS to the rest of the CSS:

#site { margin-top: 0px; }
.header-display-center-stacked #site { padding-top: 0px; }

Share this post


Link to post
  • 0

Okay the first code got rid of the header and navigation and the second did stretch the image but made it too big for my screen.

I've tried playing around with the width values so it would only be a matter of finding the right value to get the correct size that I want.

So my problem seems to be solved. Thank you so much for your help!!! :)

Share this post


Link to post
  • 0

Try adding !important to the padding part, like this:

#site > .wrapper { max-width: 100%; width: 100% !important; padding: 0px !imporant; }

Share this post


Link to post
  • 0

sorry I didn't see your last comment. I got rid of the space above the gallery (actually I thought that that was the padding) but I see no other notable difference when I edited the padding value.

Thanks for all of your help. I appreciate it very much!

Share this post


Link to post
  • 0

Hey guys,I've been trying to use this CSS on my page also and while it works great in terms of removing the header I still have a padding up top and a horizontal line. Is there a way to remove that ?

Also when pulling up this site on an iphone the navigation reappears. Any known fix for that?

Share this post


Link to post
  • 0

hi everyone i am trying to achive the same thing on the wells template

This gets rid of the site navigation and logo for me but still leaves a blank space, did anyone find a fix for this?

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