Tagged: sticky menu, top menu
-
AuthorPosts
-
February 18, 2017 at 7:24 am #748789
Hi
I want to keep the menu at the top of the page when scrolling, is that a sticky menu?.
At the moment the only way it seems is to also keep the logo area, can I just show the menu.Can you also add padding to the top of the menu to give a 20 or 30px gap at the top of the page so you can see the scrolling page through the gap?
Thanks for your time
Kind regards
Dave
February 18, 2017 at 11:21 pm #748909Hey Dave,
To have a sticky menu check the box at Enfold Theme Options > Header > Header behavior > Sticky Header
To have the logo hidden in the sticky menu upload your logo at Enfold Theme Options > Header > Transparency Options
Sorry, padding the top of the menu does not give the effect you are looking for without making the whole menu transparent, which would make the menu hard to see.Best regards,
MikeFebruary 19, 2017 at 3:03 am #748934Hi Mike
If I check the Sticky Header & only have a Transparent Logo then it automatically jams in the default Enfold Logo & so the header & menu stick. I just want the menu to stick!.
The default Enfold Logo isn’t in the Media Library!
Any ideas :)February 19, 2017 at 9:20 pm #749062Hi Dave,
Ok, lets try adding this code to your functions.php to hide the logo on scroll:
For Logo left, menu right & logo right, menu leftfunction add_hide_logo(){ ?> <script> jQuery(window).scroll(function(){ if(jQuery(this).scrollTop() > 100) jQuery('.logo').fadeOut('slow'); if(jQuery(this).scrollTop() < 100) jQuery('.logo').fadeIn('slow'); }); </script> <?php } add_action('wp_footer', 'add_hide_logo');
For Logo center, menu below:
function add_hide_logo(){ ?> <script> jQuery(window).scroll(function(){ if(jQuery(this).scrollTop() > 100) jQuery('.container.av-logo-container').fadeOut('slow'); if(jQuery(this).scrollTop() < 100) jQuery('.container.av-logo-container').fadeIn('slow'); }); </script> <?php } add_action('wp_footer', 'add_hide_logo');
When editing functions.php you should use the child theme, Read about it & Get it here
Best regards,
MikeFebruary 20, 2017 at 2:22 am #749112Fantastic, got it working :)
Do you know if you can add 2 header widgets, I would like to have one on each side of the logo?
I know how to add the header widget but don’t know how to position it so it goes next to the logo.
Any ideas?
Cheers Dave
February 24, 2017 at 2:05 pm #751391Hi,
send us a precise link showing your two header widgets and show us exactly how you want to position them (by a mockup using imgur.com or dropbox). Then we could provide you some precise css code to help you out.
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.