Keeping banner and horizontal menu fixed while page scrolls


Author Message
John Oxlade

Posted: 10/14/2012
Quote message 

My client wants to have the banner and horizontal menu stay fixed and have the rest of the page scroll (similar to old-style frames).
I cannot see a standard way of doing this with Artisteer 3 (haven't installed v4 yet as my colleague uses a Mac and that version not available yet).
I have seen a post in the Wordpress forum that gives me some CSS code:
div.art-header { 

position: fixed;
width: 100%;
top:0px;
z-index:1000;
}
div.art-nav {
position: fixed;
width: 100%;
top:300px;
z-index:1100;
}
div.art-sheet {
top:320px;
}
div.art-footer {
width:100%;
}

But the menu doesn't actually show and the content scrolls behind the banner - which looks weird.
Any help would be appreciated.
John
 
jrgweb

Posted: 10/14/2012
Quote message 

@John Oxlade - Here is a sample with artisteer4.
Is this what you are looking for?
This can also be done in artisteer3.
http://demo.artisteertoday.com/pinned/
 
PEFO

Posted: 10/15/2012
Quote message 

@jrgweb im looking for this feature too. where do you enable this in artister 4, the pinned part.
can you also use the pinned feature on left and right collum?
 
jrgweb

Posted: 10/15/2012
Quote message 

@pefo - It's not that easy! There is no enable or disable button. You simply adjust the css. What I normally do is provide the artx so that you can see the code used. Each template is different so yours may need more tweaking than mine.

I've successfully pinned the horiz menu, header and horiz menu, footer and left sidebar. Never tried the right sidebar. These were in artisteer3.

I've recently updated one of the examples and was successful pinning the header and horiz menu but keep in mind that this is an upgrade.

When I provide the artx the most important is the export option as this is where the code is located.

This 1st link is for pinned header and horiz menu created in artisteer3 but upgraded to artisteer4.
http://demo.artisteertoday.com/pinned/pinned.artx

The 2nd link is for a pinned header for artisteer3
http://demo.artisteertoday.com/pinned/fixed_header2.artx

And the last link is for a pinned header and footer created in artisteer3
http://demo.artisteertoday.com/pinned/fixed_header3_fixedfooter.artx

Hopefully all the links are correct and I didn't make any boo boo's.
If anyone needs additional help shoot me an email. My email address is all over this forum.

I don't currently have an example of the left sidebar as that is not a big request.
 
jrgweb

Posted: 10/15/2012
Quote message 

@PEFO - I did a quick left sidebar example with the same template as the others. So this example has a fixd header/horiz menu and left sidebar.

http://demo.artisteertoday.com/pinned/left-sidebar/
 
@ndres

Posted: 10/15/2012
Quote message 

@jrgweb: Thank you so much!!! :-)
 
Dominic Greene

Posted: 10/16/2012
Quote message 

Quote jrgweb:

@PEFO - I did a quick left sidebar example with the same template as the others. So this example has a fixd header/horiz menu and left sidebar.

http://demo.artisteertoday.com/pinned/left-sidebar/


Hey jrgweb, would you be able to upload a file of that hoz menu and left sidebar pinned, please?

Thanks very much for all your time though and effort for these.
 
jrgweb

Posted: 10/16/2012
Quote message 

@Dominic Greene -

http://demo.artisteertoday.com/pinned/fixed_sidebar.artx
 
Allienette

Posted: 4/30/2013
Quote message 

@jrgweb THANK YOU so much!!! Have been searching for these code examples for some time now, really helpful!
 
chucky

Posted: 4/10/2014
Quote message 

Quote jrgweb:

@PEFO - I did a quick left sidebar example with the same template as the others. So this example has a fixd header/horiz menu and left sidebar.

http://demo.artisteertoday.com/pinned/left-sidebar/

8-)

@jrhweb

Ik heb het geprobeerd en het werkt fantastisch alleen gaat mijn menu er steeds van tussen. mss doe ik het nog niet helemaal goed?
de site - www.horeca-rescue.nl


 
jrgweb

Posted: 4/30/2014
Quote message 

@chucky - If you don't want the nav menu fixed, move it outside of the header.
 
Kiyashan

Posted: 5/28/2014
Quote message 

Hi,

Will this work if i have to export the theme to wordpress???
 
Matthias

Posted: 6/28/2014
Quote message 

Quote jrgweb:

@pefo - It's not that easy! There is no enable or disable button. You simply adjust the css. What I normally do is provide the artx so that you can see the code used. Each template is different so yours may need more tweaking than mine.

I've successfully pinned the horiz menu, header and horiz menu, footer and left sidebar. Never tried the right sidebar. These were in artisteer3.

I've recently updated one of the examples and was successful pinning the header and horiz menu but keep in mind that this is an upgrade.

When I provide the artx the most important is the export option as this is where the code is located.

This 1st link is for pinned header and horiz menu created in artisteer3 but upgraded to artisteer4.
http://demo.artisteertoday.com/pinned/pinned.artx

The 2nd link is for a pinned header for artisteer3
http://demo.artisteertoday.com/pinned/fixed_header2.artx

And the last link is for a pinned header and footer created in artisteer3
http://demo.artisteertoday.com/pinned/fixed_header3_fixedfooter.artx

Hopefully all the links are correct and I didn't make any boo boo's.
If anyone needs additional help shoot me an email. My email address is all over this forum.

I don't currently have an example of the left sidebar as that is not a big request.


I need help also...

I want the menu on my website www.orange-wave.de have being fixed and transparent. If I scroll the menu have to stay up there and the content should me a little bit visible because of the transparency..
How can I do this? I tried all things out here and modified them for hours but I dont know CSS and Google didn't help me out either.

I hope someone can help me too.

Many thanks and best greetings from germany!!
:( :-/

Matthias
 
jrgweb

Posted: 6/28/2014
Quote message 

@Matthias - Insert something like this at the bottom of the template.css

.art-nav {
position:fixed;
width:100%;
}
.art-layout-wrapper {
margin-top:46px;
}

Tweak as needed. Need additional, let me know.
 
Matthias

Posted: 6/28/2014
Quote message 

GREAT :-) :-) :-) :-) :-)

@jrgweb: Thank you very much!

One more thing. The menu stays where it has to stay, but if I open the website and the page isn't scrolled down (scrollbar at highest point), the transparent menu is grey.
How can I get the content right behind the menu at the beginning?

In artisteer it looks perfect - I added a screenshot here:
http://www.share-online.biz/dl/0ASXEW7NKH

Thanks alot!
 
jrgweb

Posted: 6/28/2014
Quote message 

@Matthias - Remove the margin-top in the art-layout-wrapper
 
Farhan

Posted: 8/25/2014
Quote message 

I want my primary menu bar fixed at the top after some scroll (i.e my header width), above link are not working, please do help.
 
Thea

Posted: 9/5/2016
Quote message 

Quote jrgweb:

@PEFO - I did a quick left sidebar example with the same template as the others. So this example has a fixd header/horiz menu and left sidebar.

http://demo.artisteertoday.com/pinned/left-sidebar/


I tryed open the first link of Art 4 but it only opens in facebook. :(