Remove navigation and site header

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

Can you post either the template you're using, or better yet, a link to the page / gallery?

Yeah sure! I'm using Takk

As far as I know, the page isn't visible cos I'm using the trial version but anyway... https://steven-conway-knbq.squarespace.com/jane-and-jacks-wedding

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.

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.

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!!! :)

See my updated code for removing the scroll bar -- by setting the padding to 0px it should do the trick.

hmmm nope the padding is still there and the image is still too big...

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

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

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

unfortunately that didn't do anything either...

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!

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?

thanks @kale the CSS to hide the header worked for me! :)

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?