Jump to content
Sign in to follow this  
warrenneedham

Horizontal Navigation of content area

Recommended Posts

warrenneedham

I would like to find out if there is a way to display the content area horizontally as I have set it up (especially under the D?©cor Pages where the image strips are long) without the logo and navigation moving? www.atlasred.co.za

Share this post


Link to post
Share on other sites
catrina
I think that single image is so large that it's stretching the site, so the logo and navigation areas get stretch along with it. Can you try making the image smaller (perhaps 960px wide)?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
We want the image to stretch wide so that the page navigates horizontally (works very well on ipad, etc), but ideally the content area would navigate independently of the logo/navigation. Is this possible?

Share this post


Link to post
Share on other sites
catrina
On an 11-inch MacBook the page stretches too wide (causing a bottom scrollbar), but we can leave it alone if you prefer. To decrease the navigation's width, please add this to Custom Code > Custom CSS: [code]div#header {width: 700px; margin: 0 auto;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
Thanks for the suggestion, but on some pages the images can be up to 3500 pixels wide. I would like the "content area" to scroll left to right, but the logo and navigation at the top to remain constant. Is this possible?

Share this post


Link to post
Share on other sites
catrina
The header will stretch because of the page structure, but you can try adding this to keep the branding + navigation a smaller width: [code]div#branding, div#primary-nav {width: 700px; margin: 0 auto;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
This does not achieve what i need unfortunately. What i require is the body to scroll independently of the navigation area. I have seen this on many sites, just not sure how they achieve it. Take a look at http://andjelka.com/fashion/ for an example

Share this post


Link to post
Share on other sites
catrina
Ah, the area needs to be fixed then so it won't scroll. Try: [code]div#header {width: 700px; margin: 0 auto; position: fixed;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
Genius! We have a winner. Any way to add 10 pixels before the header and prevent it from now having the body overlap underneath the navigation?

Share this post


Link to post
Share on other sites
catrina
Please replace the code I just gave you with this: [code]div#header {width: 700px; margin: 0 auto; position: fixed; margin-bottom: 20px;}[/code] You may adjust the 20px value until the amount of spacing you want is just right.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
Doesn't work unfortunately.

Share this post


Link to post
Share on other sites
catrina
Add this instead: [code]div#header {width: 700px; margin: 0 auto; position: fixed;} div#column-wrap {margin-top: 45px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
warrenneedham
Legend! Thanks so much!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×