Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #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!

    #591409

    why can’t you use the color section?
    You can use it without content in it! and set min-height to “0” and border to none

    Offtopic:
    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, …)

    #591414

    Hi 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.
    #591429

    Unfortunately 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).

    #591774

    this 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”

    #591779

    no context menu on developer tools (firebug etc.) – no info from my site!

    #593367

    Hey!

    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 Kashyap

    #593707

    Hi 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.

    #594335

    Hey!

    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 Kashyap

    #594945

    Hi 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.

    #594969

    Hey!

    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 Kashyap

    #595278

    Hi 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!

    #595481

    Hi!

    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 Kashyap

    #595486

    should be cleared.

    #595518

    Hi!

    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 Kashyap

    #595924

    Thanks 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!

    #596041

    Hey!

    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 Kashyap

    #596055

    Vinnie….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.

    #596090

    Hi 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!

    #596163

    Hey!

    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 Kashyap

    #596196

    It 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?

    #596938

    Hi!

    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

Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.