KeithAdv
|
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
|
Hey Keith,
I´d like this too. Have you figured out a way to get that effect?
|
|
KeithAdv
|
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
|
@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
|
@jrgweb
Those are pretty cool! You should write a tutorial....
Thanks for the demo!
|
|
Zulu
|
@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
|
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
|
I really appreciate it jrgweb. Once again, excellent work!
|
|
Zulu
|
@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
|
I am very agree. Thank you so much for jrgweb, also Nick, they are willing to share and helpful.
|
|
Nick
|
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
|
@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
|
@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
|
..... 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
|
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
|
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
|
|