-
AuthorPosts
-
March 1, 2016 at 7:50 am #591389
Hi, awhile back you gave me a code snippet which enabled the Full Width Submenu to show an Active state on scroll. A part of what needed to be done besides adding the anchor tag in the Color Section ID field I needed to include “one-page-nav” in the Custom CSS field.
Question – for reasons, on one of the pages I can’t use a Color section. I have manually added an anchor tag in a text box which works great but when I add “one-page-nav” to the Custom CSS field of the Column element it does not trigger the Active menu state.
What is the difference between the Custom CSS field in a Color Section and a Column Element?Here is the code snippet you had me place in the function.php file:
function activateMenuItem(){ ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.one-page-nav'), menu = jQuery('#menu-product_submenu,#menu-news_submenu,#menu-partner_submenu,#menu-company_submenu,#menu-industries_submenu,#menu-services_submenu,#menu-gov_submenu'), 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(); console.log('top is : '+ top); console.log('bottom is : '+ bottom); if (cur_pos >= top && cur_pos <= bottom) { menu.find('li').removeClass('active-menu-item'); menu.find('a[href="#' + jQuery(this).attr('id') + '"]').closest('li').addClass('active-menu-item'); } }); }); }); </script> <?php } add_action('wp_head', 'activateMenuItem');
Thanks!
March 1, 2016 at 8:54 am #591409why can’t you use the color section?
You can use it without content in it! and set min-height to “0” and border to noneOfftopic:
by the way this is specialized to your site ? and only functions if you have those menu list points (product, news, partner, etc…)
isn’t it possible to do it with (menu-item-top-level-1, menu-item-top-level-2, menu-item-top-level-3, …)March 1, 2016 at 9:11 am #591414Hi Guenni007! Thank you for the reply.
I will try to explain but might be easier to show the issue: https://redseal.co/government/
As you scroll, all of the red Full width Submenu (red-sub) links scroll to specific sections and also show the active state. The issue is when you scroll to “Solutions”. It has its own specific sticky menu on the right side of these sections.Because Color sections span full width and using a sidebar was out (the Color sections would push the sidebar to the bottom) I used ¾ + ¼ columns with the sidebar widget in the ¼ column. As you continue to scroll and are no longer in the “Solutions” section the sidebar continues to show but it is now underneath the Partners and Resources Color Sections and the links are not ‘clickable’.
I tried placing the Solutions section at the bottom which would alleviate this issue but the client wants the sections in a specific order. I am “attempting” to get rid of the two bottom Color Sections and place both Partners and Resources into the ¾ + ¼ column layout. I can get the anchor tags to work but the top red-submenu no longer shows an active state for Partners or Resources when scrolled to these sections.
Clear as mud? :)
I didn’t fully understand your second point..?
Thanks!
P.S. – I will try your suggestion – creating a Color Section with a height of 0 and no borders. This might activate the anchor tag AND active menu state but not get in the way of the right sidebar widget. Could work!
- This reply was modified 8 years, 8 months ago by Sladestyle.
March 1, 2016 at 9:41 am #591429Unfortunately it didn’t work. I’m finding that the issue isn’t the sidebar widget sliding under the Color Section that is below it…when the sidebar widget leaves the Color Section it is living in it no longer functions (links are not clickable).
March 1, 2016 at 9:15 pm #591774this was offtopic a question to the moderators – because this is a specialized code for your installation.
if you create a custom fullwidth submenu all list poinst get a class (menu-item-top-level-1 etc. …) wouldnt it be better to use this code to select the menu points and add class “active-menu-item”March 1, 2016 at 9:24 pm #591779no context menu on developer tools (firebug etc.) – no info from my site!
March 4, 2016 at 5:14 pm #593367Hey!
We checked the page in question and everything seem to work fine however if you still have the issue
Here is a better version of the code to highlight the full width sub menu items and you don’t need to add different menu id’s either. make sure you remove the previous code and add the below code and link to different section it should work out of the box. (This is designed to work for color sections)
In situations where you cannot use color sections enable custom class support and add class “avia-section” to the ALB element even if it is a 1/1 section the script will work just fine :)
kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
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 } add_action('wp_head', 'activateMenuItem');
Regards,
Vinay KashyapMarch 5, 2016 at 12:14 pm #593707Hi Vinnie! Thank you for responding.
Is there something special I need to do for the color sections other than place the anchor tag in the ID box? When I replaced the old code with this new code in the function.php file it didn’t do anything. The first Full width submenu item is shown as active (because I have “active-menu-item” in the menus css class field but only for the first one. As I scroll…the rest remain white.
Because the site is Live I had to place the old code back.
March 7, 2016 at 2:58 pm #594335Hey!
No you don’t have to do any thing other than setting up the ID’s in color section and menu items. I would like to take a closer look please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.
Cheers!
Vinay KashyapMarch 8, 2016 at 11:42 am #594945Hi Vinnie, I will have to get permission from the client to deactivate all plugins. This is now a Live site and they have offices/clients in both US and Europe so there really isn’t any “down” time.
I’ll let you know.
March 8, 2016 at 12:29 pm #594969Hey!
If you have a staging site i can set this up for you over there and you can then transfer the script to the live site.
Cheers!
Vinay KashyapMarch 9, 2016 at 4:43 am #595278Hi Vinnie!
Ok..I got a staging site setup http://staging.loopcreative.co/redseal/
What you will be working on is evident on all interior pages (except Contact Us) but the page I’m having issues with is http://staging.loopcreative.co/redseal/government/
This is a staging site so feel free to do whatever you need.
Thanks!
March 9, 2016 at 11:50 am #595481Hi!
I tested this code on my installation it worked fine when i was trying it on your child theme the server is giving 500 error. Please post FTP access or remove the first block of code that say’s and let us know so we can continue the work.
//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 } add_action('wp_head', 'activateMenuItem');
Best regards,
Vinay KashyapMarch 9, 2016 at 11:56 am #595486should be cleared.
March 9, 2016 at 12:38 pm #595518Hi!
Thanks for that! We have setup the test page please check private content for the link.
We had to a color section since 1/1 sections cannot take an #ID.
We added the new code in functions.php and removed the old on as both were conflicting.
Added the below code in Quick css
/* Your css styles for active menu item*/ .current_page_item .avia-menu-text, .active-menu-item { background:gold!important; }
Created a new menu from Appearance > menu > Test menu
Added a full width menu on page and selected > Test menu
Created a few color sections with #ID’s to link menu Items.
That’s it :)
this jQuery script will work for all full width menus without any edits and can be used in other projects easily.
Cheers!
Vinay KashyapMarch 9, 2016 at 11:38 pm #595924Thanks for all the extra work Vinay! Awesome!
This will definitely simplify the process of adding additional pages/full-width submenus going forward. Unfortunately it doesn’t solve my original issue. I’m not sure it’s “solvable”.
Thanks again!
March 10, 2016 at 5:41 am #596041Hey!
Sorry the sections like ¾ + ¼ cannot take custom #ID so you have to use a color section or instead use a Grid Row the one at the extreme right.
Using the grid row add your custom ID and Custom Class “avia-section”This should fix the issue for you :)
Cheers!
Vinay KashyapMarch 10, 2016 at 6:07 am #596055Vinnie….BRILLIANT!! This works perfectly!
Thank you so much for keeping at it and working so hard!
I was thinking it wasn’t possible but you figured it out.
March 10, 2016 at 7:15 am #596090Hi Vinnie….me again :)
I have transferred all the necessary parts to the Live site and oddly…some pages work and others don’t (speaking about the active state of the full-width subnav). In fact, on one page https://redseal.co/industries/ the first half of the subnav tabs don’t work and the last half (healthcare – manufacturing) does work.
I cannot figure out what is different and why some work and others don’t.
Can you take a quick look?
Thanks!
March 10, 2016 at 9:16 am #596163Hey!
Glad that worked out for you :)
There is no issue with the custom script i have double checked it however the only reason i see why it works on some and not on others is some discrepancy in adding correct #ID’s or class. Please re-check the same page or create a new page and add the #ID’s or Class so if something was missed out earlier it will be fixed.
To re-confirm it quickly create a new page and add a fullwidth submenu and create empty color sections with #ID’s and check it out! It should work fine on all sections then you can fill in the page with content.
Regards,
Vinay KashyapMarch 10, 2016 at 10:37 am #596196It works if I make a test page with empty Color sections and it works on a few other pages but for some reason it isn’t working on all of the pages and I can’t figure out why.
Taking the /products/ page as an example I created a new submenu menu and redid all of the color sections with no luck.
Looking at firebug I notice that on the pages that work the submenu items shows a class of “active-menu-item” as I scroll down to that specific section. On the pages that do not work shows a class of ” “…..nothing. What could be causing some of the submenu items to not take on the “active-menu-item” class when scrolled to?
March 11, 2016 at 4:54 pm #596938Hi!
I checked for the issue but really sorry I couldn’t tell why the previous setup is not working. like i mentioned something to do with ID’s
Enable debug mode if it’s already now it will allow you to transfer all the content from current page to a new page by copying the ALB short code
kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Once you copy the contents remove all #ID’s from color sections and view page source and make sure there are no duplicates and setup a new menu and link the color sections back it should just work fine :)
Regards,
Vinay Kashyap -
AuthorPosts
- You must be logged in to reply to this topic.