-
AuthorPosts
-
October 8, 2021 at 8:27 pm #1324161
Ahoy,
I’m trying to make the Fullwidth Submenu Active text Underlined when the user is on that specific section or the menu item is hovered . I found this thread but it seems to create a background rectangle on the text not underline https://kriesi.at/support/topic/active-page-colored-underline-in-the-fullwidth-sub-menu/. It also seems to make the transitions to the sections glitchy and not as smooth compared to the sample without the css/php. I have provided a video to show you.
October 9, 2021 at 11:15 pm #1324251Hey hitrev,
Thank you for your patience and for the links, when I looked at your page the sub-menu items were not getting the “active-menu-item” class that the script you linked to was to add, but it did work when I injected it via the browser.
So I will assume that you will be adding this to your functions.php as it will be needed for the underline of the menu items when they reach the anchors.function custom_script() { ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('.av-submenu-container'), nav_height = menu.outerHeight(); jQuery(window).on('scroll', function() { var cur_pos = jQuery(this).scrollTop(); sections.each(function() { var top = jQuery(this).offset().top - 300, bottom = top + jQuery(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { menu.find('a').removeClass('active-menu-item'); menu.find('a[href="#' + jQuery(this).attr('id') + '"]').addClass('active-menu-item'); } }); }); }); </script> <?php } add_action('wp_footer', 'custom_script');
Ok, so when I tested this I found that you had added the css for the gold background color:
.active-menu-item { background: gold!important }
but as I understand you don’t want a background color but a white underline instead, so please replace with this:
#sub_menu1 #menu-main-menu .active-menu-item { display: inline-block; visibility: visible; border-bottom: 2px solid #fff; opacity: 1; padding-bottom: 6px; }
Then clear your browser cache and check.
Best regards,
MikeOctober 11, 2021 at 8:10 pm #1324455Thanks for this @mike. That code does do the job. Is there a way to have the menu item underline when the mouse hovers over it?
I have also noticed a couple differences/ issues with the sub menu now I have some questions about.
1.I do noticed that the scroll/ jump to section is not as smooth now with the new php. Do you happen to know why that is?
2. The menu does not stick the same way with the new php. I’m guessing this is the effect the new php creates?I created a video of the issue which I shared in private.
- This reply was modified 3 years, 2 months ago by hitrev.
October 13, 2021 at 1:11 pm #1324741Hi,
Thank you for your patience and for the screencast, to add a menu item hover please try this css:#sub_menu1 #menu-main-menu a:hover { display: inline-block; visibility: visible; border-bottom: 2px solid #fff; background: transparent !important; opacity: 1; padding-bottom: 6px; }
I tested the scrolling issue and the jump occurs when the sub-menu position is changed from absolute to fixed, this is part of the script for the sticky sub-menu and this added script doesn’t programmatically affect this, it measures the height and distance of the element. I say “programmatically” but strange things can happen.
Anyways I stared at this for a long time scrolling up & down & reviewing your video, and I believe that this is based on the manual scroll speed. When I test with & without the script (on Chrome & Windows 10) if I scroll slowly the jump is almost not there and is the same with & without the script, but if I test quickly the jump really shows, but it seems to be the same with & without the script. I note that in your video the test without the script was slow, and the test with the script was fast.
So for me it was hard to be consistent manually scrolling, so I tested with this script which waits 2 seconds for the pages to load then scrolls down 1200px over 2 seconds, so it’s slow. I also adjusted the speed to 1 second so it was faster and 5 seconds so it was very slow. I did this with & without the script enabled, and in all cases the behavior was the same.
This was the test script if you would like to try in your your functions.php file:function scroll_test_script() { ?> <script> (function($) { setTimeout(function () { $('html, body').animate({scrollTop: (1200)}, 2000); }, 2000); }(jQuery)); </script> <?php } add_action('wp_footer', 'scroll_test_script');
Please see the videos below.
So I guess I don’t really have a solution for you, but considering that the auto scroll test went so well perhaps there is a script to force a slower mouse wheel scroll, but perhaps that would just frustrate users?Best regards,
MikeOctober 13, 2021 at 6:17 pm #1324797Thanks for the feedback and support @mike. I think for now I will just have the menu item hover underline instead of adding the php. and have the item always underlined. It seems when I add the following code the item will underline will hover and the page jumps correctly and the item underlines when hovered.
#sub_menu1 #menu-main-menu a:hover { display: inline-block; visibility: visible; border-bottom: 2px solid #fff; background: transparent !important; opacity: 1; padding-bottom: 6px; }
I did notice the logo I added to the submenu though now changes size when I hover when the code above is added. How do I make that not happen? I created a video of the issue.
This is the code I added from another thread to add the logo to the full width submenu
#top .av-submenu-container { background-image: url(https://trevora9.sg-host.com/wp-content/uploads/2021/10/logo_t.png); background-repeat: no-repeat; background-position: 0% 50%; background-size: contain; }
October 14, 2021 at 4:35 pm #1324970Hi,
Thanks for the video, on hover the css above adds 8px, 2px for the border & 6px for the padding, so try adding this css to add the 8px so when you hover there is no change:#sub_menu1 #menu-main-menu a { padding-bottom: 8px; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeOctober 14, 2021 at 11:01 pm #1325010I added that code @mike but the issue still persists.
October 15, 2021 at 12:00 pm #1325081 -
AuthorPosts
- You must be logged in to reply to this topic.