-
AuthorPosts
-
August 21, 2024 at 2:00 pm #1465082
Hi all,
is there a way to make the full-width submenu always sticky, even when the hamburger menu is active on desktop? I found some older solutions which, however, only referred to mobile.
Since more and more clients prefer to display the “burger” icon on desktop computers and have no text menu, I would need to switch the submenu behavior to “always sticky”.
And while we’re at it, does anyone have a suggestion how to “pull up” the full-width submenu (so that it is visible at the bottom of the screen on first load) without using a negative top margin? The reason I am asking is that a 100% height section with video background shows a black gap when using e.g. margin-top: -55px for the full-width submenu following directly after that full height section. Using a negative bottom margin for the full-height section itself has the same effect. It works fine for all other backgrounds, but the video height is calculated dynamically….
tl;dr
1. How can I change the full-width submenu to “always sticky”, even with Hamburger menu active on desktop?
2. How can I move up the full-width submenu by it’s own height without using a negative top-margin?August 21, 2024 at 2:19 pm #1465087To make things clearer re. question 2: I am using the glassy header, so the video should always cover the whole screen (minus the height of the submenu on the bottom). But depending on the aspect ratio there is sometimes a black bar above or below the video itself.
August 22, 2024 at 6:37 pm #1465180Hi,
To have a sticky sub-menu on your desktop with the burger menu, and on your mobile without the sticky header, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function desktop_burger_menu_sub_menu_sticky() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ var width = $(window).width(); var $stickyTop = $('#sub_menu1'); if (width <= 989) { $stickyTop.waypoint(function(direction) { if (direction === 'down') { $stickyTop.addClass('sticky-top'); } if (direction === 'up') { $stickyTop.removeClass('sticky-top'); } }, { offset: '0%' }); } else if (width >= 990) { $stickyTop.waypoint(function(direction) { if (direction === 'down') { $stickyTop.addClass('sticky-top'); } if (direction === 'up') { $stickyTop.removeClass('sticky-top'); } }, { offset: '95px' }); } })(jQuery); }); </script> <?php } add_action('wp_footer', 'desktop_burger_menu_sub_menu_sticky');
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
also add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 989px) { .responsive #top #sub_menu1.av-submenu-container.sticky-top { position:fixed!important; top:0!important; z-index:600!important; } } @media only screen and (min-width: 990px) { .responsive #top #sub_menu1.av-submenu-container.sticky-top { position:fixed!important; top:95px!important; z-index:600!important; } }
This accounts for the mobile switch at 989px when your typical header is no longer sticky, but the sub-menu will be sticky at the top.
In the css & script you may need to adjust the top height, my text site header was 95px high, if yours is different please change.
If you have trouble with this please include a admin login in the private content area so we can take a closer look.Best regards,
MikeSeptember 27, 2024 at 1:20 pm #1467946Hi Mike,
I just realized i have never given any feedback, sorry for that. This works flawlessly, thank you so much for that neat script!Best regards
Michael
September 27, 2024 at 1:28 pm #1467948Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Fullwidth subemenu always sticky, even with Hamburger menu active on desktop’ is closed to new replies.