-
Posts
-
Hi there!
I am having troubles with showing the current menu item when it is active. I set one page up with a Full Width Sub Menu Module. On hover functions lovely but with current I have problems.
Can you help?
Hey Josue
I did the update but it still looks the same. Maybe I am writing a wrong CSS:
#top .av-subnav-menu > li:hover {
background-color: transparent;
border-bottom: 4px solid #d12a24;
} //THIS WORKS//#top .av-subnav-menu > li > .current-menu-item > a {
background-color: transparent;
border-bottom: 4px solid #d12a24;
} //THIS DES NOT WORK//Can you help?
There is also a strange thing happening as well in the dropdown navigation of main menu. The CSS works fine but menuitems which should be highlighted as current do not respond to the one you are pointing: they are one sector above: e.g. when I navigate to «Hauptgang» the menu «Vorspeisen» is shown as active – very strange. Can you help?
URL: http://roessli.salai.com
Best regards
SafetHey!
It doesn’t work because the fullwidth submenu items never get the
current-menu-itemclass, this is more of a limitation with the current plugin we use for this (scrollSpy), try the following:1. Open js/avia.js and change this line:
$('body').avia_scrollspy({target:'.main_menu .menu li > a'});To:
$('body').avia_scrollspy({target:'.av-submenu-container .av-subnav-menu li > a'});2. Also in js/avia.js change:
offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".html_header_sticky #header_main_alternate").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),To:
offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),Your second CSS code should be like this:
#top .av-subnav-menu > li.current-menu-item { background-color: transparent; border-bottom: 4px solid #d12a24; }Cheers!
JosueHi Josue,
I made this change in the avia.js and works great, when I cross the ID scrolling the page the corresponding item in the submenu highlight as I wanted. The only bug I see is when I scroll to a different part of the page, the highlighted item still active except if an other ID corresponds to a submenu item. What I want is to disable the active mode if I am not in that area of the page. I hope you understand me. My english skills is not my best.
Regards,
Hi!
To highlight the fullwidth submenu on same page while scrolling please add the below code to functions.php file
//One page nav highlight function activateMenuItem(){ ?> <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 }Then add your own highlight style
/* Your css styles for active menu item*/ .current_page_item .avia-menu-text, .active-menu-item { background:gold!important; }Cheers!
Vinay KashyapHi Vinay,
I tried your code and does not work .
I returned to the previous method changing avia.js as Josue say. This works fine, but does not disable the menu item when I’m not in that IDRegards,
Carlos
Hi!
This line:
offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),Change it to:
offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + 51 + parseInt($('html').css('margin-top'),10),Cheers!
JosueHi Josue!
I applied your code but it doesn’t work :(.
If you go for example to “Sample Itinerary” and then scrolls back to the top of the page, the submenu item “Sample Itinerary” stays highlighted.Any help?
Regards,
CarlosHi,
Can you please create us a temporary FTP / SFTP account? post it here as a private reply.
Regards,
JosueHey!
Can you check it now? it seems to be working.
Note: i moved js/avia.js to the child theme install.
Cheers!
JosueHi Josue!
I don’t see the changes :(
“Sample Itinerary” stays highlighted when I scroll up to the top of the page.
Cheers!
CarlosOk check it now, i added a fix using a menu item pointing to the previous section and hiding it with CSS.
Regards,
JosueGreat Job!
Thank you!!!Can you tell me which lines of code do you modify? I do not want to overwrite it in Future Updates.
This is your CSS code?
.av-subnav-menu > li:first-child {
display: none !important;
}The other file it´s the shortcodes.js? which line?
Regards,
CarlosI didn’t modify any JS file, the fix was:
1. Add a new menu item pointing to the section before “itinerary”.
2. Hide this menu item with CSS (style.css).Also, you don’t have to worry about updates because i moved the js files to your child theme.
Cheers!
JosueHaaa, Ok! You did it manually.
I thought you created a code so that the first item of the submenu were generated dynamically on each page.Good idea!
Thank you very much!!!!Eres el mejor : )
Cheers!
Carlos
- You must be logged in to reply to this topic.