The sticky, shrinking, slide-out menu/header effect.


Author Message
KeithAdv

Posted: 9/9/2013
Quote message 

Man, this is so beyond my skills but I'd love to figure out how to achieve it in WordPress.

Check out this site: http://endurobites.com/

If you hover over the header, the menu slides out and remains as long as your cursor does. Move the cursor away and in a few seconds the menu slides back up. Scroll the page down and the header shrinks to a smaller sticky bar, with the logo changing to text. The menu effect works here as well.

I did find this page:

http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/

...which shows you how to achieve at least part of the effect (the shrinking header but not the menu), but I don't know how to apply that code to a WordPress header, let alone an Artisteer WordPress header.

I know there are a couple of wizards who hang out here--could one of you folks point me in the right direction? Thank you!
 
Gabriella

Posted: 3/11/2014
Quote message 

Hey Keith,

I´d like this too. Have you figured out a way to get that effect?
 
KeithAdv

Posted: 3/12/2014
Quote message 

Hiya Gabriella!

Not exactly...Primarily because of the company's attitude toward its users, we've been forced to abandon Artisteer as a professional tool. We now use a popular WordPress framework that has a number of themes we can customize for our clients. When we need an effect like parallaxing, etc., we just grab that theme and go to work.

I am still working on my coding skillz, though! Hopefully I'll be able to code ninja stuff like that one day...
 
jrgweb

Posted: 3/12/2014
Quote message 

@Gabriella @KeithAdv - Here is something similar created in artisteer 4.2

http://demo.artisteertoday.com/keith/blog.html

I just helped another artisteer user with something similar.
http://demo.artisteertoday.com/kors/bcoach4/

 
KeithAdv

Posted: 3/20/2014
Quote message 

@jrgweb

Those are pretty cool! You should write a tutorial....

Thanks for the demo!
 
Zulu

Posted: 4/8/2014
Quote message 

@jrgweb Nice! I have tried to integrate the html, css and js into a wordpress theme. I am not able to get it to work, do you have any detailed instruction on how this could be done? I tried to use the source from here http://callmenick.com/tutorial-demos/resize-header-on-scroll/
 
jrgweb

Posted: 4/11/2014
Quote message 

Good morning Zulu,

First of all you can download the artx file here for version 4.2
http://demo.artisteertoday.com/keith/dual_header.artx

This is the script that makes things work and I inserted into the footer area. This can also be inserted in the <head></head> within artisteer by using the additional HTML feature under export options.
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 550) {
$(".art-header").addClass("tiny");$(".art-sheet").addClass("tiny"); }
if (scroll <= 550) { $(".art-header").removeClass("tiny"); $(".art-sheet").removeClass("tiny");
} });
</script>

What the script is telling us is, once the page is scrolled 550px then new classes are created and the header is re-sized to a small header. Then once the page is scrolled back to less than 550px it re-moves the tiny class and the header is then large. If you want the small header to appear quicker when the page scrolls, then change the 550px to something like 300px.

In artisteer, the nav menu is within the header so all I do is set the header as fixed with simple css.
example:
.art-header {
position:fixed;
width:100%;
z-index: 999!important;
}

I then turn elements off and on with css and also add some fancy transitions. Below is the added css for the headers. The class "tiny" is for the small header.

------------------------------------------------------------------------------------------------
.art-headline {
display:none;
}
.art-sheet {
margin-top: 210px;
}
.art-header {
position:fixed;
width:100%;
z-index: 999!important;
transition: height 500ms, background 500ms;
}
.art-nav {
border-bottom: none;
}
.art-header.tiny {
height:125px;
}
.art-sheet.tiny {
margin:235px auto 0!important;
}
.art-header.tiny .art-logo-1683859985 {
visibility:hidden;
opacity: 0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.art-logo-1850373152 {
visibility:hidden;
opacity: 0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.art-header.tiny .art-logo-1850373152 {
visibility:visible;
top: 5px!important;
opacity:1;
transition-delay:0s;
}
/* small header */
.art-header.tiny .art-headline {
display:block!important;
}
.art-header.tiny .art-nav {
border-bottom: solid 1px;
}
.art-header.tiny .art-object1337237661 {
display: none;
}

.responsive .art-header {
position:relative;
}
----------------------------------------------------------------------------------
You can also adjust the headers in responsive mode but that's for another day!

Here is a working example in wordpress:
http://wordpress.artisteertoday.com/tips-tricks/

If you need additional help, let me know.

 
Nick

Posted: 4/11/2014
Quote message 

I really appreciate it jrgweb. Once again, excellent work!
 
Zulu

Posted: 4/15/2014
Quote message 

@jtgweb - Thank you so much! I have to say that when someone like you takes their own time to help others (like me, a newbie) it is very encouraging and refreshing. :-)
 
moon

Posted: 4/16/2014
Quote message 

I am very agree. Thank you so much for jrgweb, also Nick, they are willing to share and helpful.
 
Nick

Posted: 4/16/2014
Quote message 

Sorry moon, I stopped sharing and posting for over 3 months now, since they delete most of my posts. I have only posted a few times since then to either thank people, or to reply to those who directly name me in their posts, like this time.

In the meantime, if anyone needs anything (and for free), you will find me at the WP Tuxedo forums.
 
jrgweb

Posted: 4/21/2014
Quote message 

@Kim - I turn elements on and off with css.

The above script adds a new class(.tiny) when the page scrolls over 550px. When the page scrolls back to less than 550 px the class(.tiny) is then removed.

In the css you can see that the logo is remove when the page scrolls greater than 550px. .art-header.tiny .art-logo-1683859985 { visibility:hidden; opacity: 0; transition:visibility 0s linear 0.5s,opacity 0.5s linear; }

The headline is then turned on (My test Site) to replace the image logo.

.art-header.tiny .art-headline { display:block!important; }

Once the page scroll is less than 550px, then the class .tiny is removed the image logo then displays and the headline disappears.

If you have a site that you are having difficulties with, contact me at jrgweb [@] gmail.com or provide url for assistance.
 
Nick

Posted: 4/24/2014
Quote message 

@KeithAdv: I never stopped being active. On a daily basis I monitor these sorry forums, but I just offer my help and opinions elsewhere. I am sure you do the same, I have to say that I miss your and James's posts. You both were awesome.
 
sisonpim

Posted: 7/23/2014
Quote message 

..... in my template.css : #art-hmenu-bg
{
position: absolute;
overflow: hidden;
left: 0;
margin: 0 auto;
width: 100%;
z-index: auto;
border-radius: 0

}

How to do for change value with jquery, thank
 
plugin

Posted: 7/24/2014
Quote message 

How to do for change value with jquery, thank

https://wordpress.org/plugins/headroomjs/

Works well. It's new, so don't let the lack of reviews put you off

 
Wim

Posted: 12/13/2015
Quote message 

Hi guys,

Can someone please help? I would most appreciate it.

I've have a test site: http://www.wytest.be/dhv

I would to like to fix the black menu (only nav bar and not the header) at the top of the screen when scrolling. I've tried several things but I can't get it to work.

I wish you guys all the best for 2016

Kr,
Wim