-
Posts
-
I’d like to implement a header like this -> https://lichterderwelt.de/ (P.S. that’s not my site, just as an example)
Logo should be centered above menu, on scroll down only the logo should scroll out without shrinking, finally only the menu bar should stay at the top. When I scroll up again the logo should reappear, just like it does on the mentioned example site.
I don’t plan to have the social icons as part of the header.
Any idea how to implement this?
Thank you
OliverWell you can use the enfold option for header : logo top menu below.
Then the menu is in an extra div with ID: header_main_alternatethe offset of 130 px here on my example depends on your given header height and if you are using a header_meta.
On my example page i got a header-height of 100px plus the header_meta of aprox. 30px
this comes to child theme functions.php:function scroll_up_down_change() { ?> <script> (function($){ $(document).on("scroll", function() { if ($(document).scrollTop() > 130) { $("#header_main_alternate").addClass("sticky"); } else { $("#header_main_alternate").removeClass("sticky") } }); })(jQuery); </script> <?php } add_action('wp_footer', 'scroll_up_down_change');this comes to quick css f.e.:
#header_main_alternate.sticky{ position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; box-shadow: 0 5px 25px #aaa; transition: box-shadow 0.5s ease; }this is how it looks like: https://webers-testseite.de/elegant/
Hi,
Thanks for helping out @guenni007, did you have any luck with that @olifant551?
Best regards,
RikardHi,
many thanks to Guenni007, this nearly works – but there are still some issues:
1.) My menu gets completely transparent as soon as it sticks to the top, don’t know why
2.) The top position does not reflect the WordPress menu when I’m logged in as admin -> a huge part of my website menu disappears under the WordPress menu. Is there a way to automatically offset this?
Best regards
Oliverhave you a page to see what is the fact?
– maybe you got a already a css for class: sticky
– have you declared a Menu as Enfold Main Menu ?Sorry, I don’t have a page to show you in the moment. The page is in the very beginning, I only added your CSS and function. Header Style is default (with only slightly transparency). Setting to Minimal (no transparency) does not change the behaviour, menu remains 100% transparent when sticked to the top.
– I renamed sticky to stick0815, same result
– Yes, the menu we are talking about is declared as Enfold Main Menuthats an important additional information – that you have transparency header!
Anyway – it will be better to have your page to give you better adviceyou see here a test page with transparency header – you can even style the background-colors on the same toggle class:https://webers-testseite.de/elegant/con-tact/
I built a test environment, but strange enough the proposed solution does not work at all there. I must be overlooking something. Please check. Necessary data in private content.
@Guenni007: Ok, I understand. Thank you very much for your help so far.
Best regards
OliverHi Oliver,
The page does not have enough content and so it does not scroll and no way to test the effect. Please add more content to the page, so that it can be scrolled a few times.Actually, there is an error in JavaScript and so the code does not work.
Best regards,
Victoria@Guenni007: I think your script basically works, it does (with the mentioned issues) in my other domain
@Victoria:
Hi Victoria,I did the second complete fresh install of latest WordPress AND Enfold now, it still throws the “ReferenceError: jQuery is not defined”. The new installation is now a subdomain, please see private content for this. Maybe it’s a fresh install issue with Enfold version 4.7.3? Could you please check.
Best regards
Oliver@olifant551 ‘“ReferenceError: jQuery is not defined”’
Please check, that you have disabled “load jQuery in footer” (Enfold – Performance). That was my problem concerning this issue (it was enabled). After disabling it, it works very fine.Yours, Thomas
@venolab
Thank you for your hint, I can find the mentioned option in my productive installation: actually it’s turned off AND I don’t get jQuery errors. This setup was updated several times.
Strange enough in my fresh install two options are missing in section “Change WordPress defaults”: “Disable jQuery Migrate” and “Load jQuery in your footer” – so I can’t check if it’s switched on.
=> This means there is actually a difference between a fresh install and an older installation which went through several updates.Hi olifant551,
Those sections are not shown, they will show up when you enable any plugin.
Did you get it working?
Best regards,
VictoriaHi Victoria,
I just installed one plugin (Statify), did not change any other setting, and the jQuery error disappears. It seems to me that you have to install at least one plugin to use jQuery with Enfold, strange, isn’t it?
But now we are back to the original problem, the navigation bar gets completely transparent when I scroll up. There must be a small issue with Guenni007’s solution. Please help.
Best regards
OliverHi,
As I understand your issue the navigation bar is transparent when you scroll down, and you would prefer white, in this case find your css for#header_main_alternate.sticky0815and addbackground-color: #fff;to it.
the full css should be:#header_main_alternate.sticky0815 { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; box-shadow: 0 5px 25px #aaa; transition: box-shadow 0.5s ease; background-color: #fff; }Best regards,
MikeHi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike
- The topic ‘Header Logo center, Menu below -> Scroll out only logo’ is closed to new replies.