[Upfront] Is it possible to change Main navigation region content after scrolldown?

Hi,
I'm building a new theme for my website from the scratch with Upfront Builder.
I have a sticky Main navigation region with Logo image and Main menu in it. Is it possible to change a Logo image when user do scrolldown? I would replace higher Logo image with smaller version to give more space for content and have Navigation region still on top.
How can I do this?
Thank you.

  • Nahid

    Hey Robert !
    Hope you are having a great day!

    Unfortunately, Upfront won't allow you to change the content of the navigation menu depending on the scroll position out of the box. But a small amount of custom code should let you workaround it and have a navigation menu with different content for a different scroll position.

    If you are interested into custom coding it by yourself, I can try guiding you towards how you can achieve the workaround. First of all, you'll need to set up a secondary navigation menu with your preferred content and smaller version of your logo. The basic concept is to hide the primary navigation menu when the user scrolls down and show the secondary navigation menu (and vice-versa).

    After you have set up the secondary navigation menu, here's where the custom code part comes in to make the hide/show functionality work depending on the scroll position. The first step is to determine the unique selectors for each of the navigation menus which would be used in our custom Javascript code to reference each of them.

    In my demonstration, I set up two different global regions for two navigation menus. The selector for the primary navigation region in my case is "#upfront-region-container-primary-navigation" and the selector for the secondary navigation region is "#upfront-region-container-secondary-navigation".

    The custom Javascript code that I wrote for the show/hide functionality is the following:

    <script type="text/javascript">
        jQuery(function($) {
            $(document).ready(function() {
                // Hide the secondary navigation on page load
                $('#upfront-region-container-secondary-navigation').hide();
            });
    		$(window).scroll(function() {
    			if ($(document).scrollTop() > 150) {
    			    // After scrolling 150px from top, hide primary navigation and show secondary navigation
    				$('#upfront-region-container-primary-navigation').hide();
    				$('#upfront-region-container-secondary-navigation').show();
    			} else {
    			    // Otherwise, keep showing primary navigation and hide secondary navigation
    				$('#upfront-region-container-primary-navigation').show();
    				$('#upfront-region-container-secondary-navigation').hide();
    			}
    		});
    	});
        </script>

    The functionality of this code is to show the primary navigation menu when the page has loaded. Then, when the user scrolls 150 pixels downwards from the top of the screen, it hides the primary navigation menu and shows the secondary one (and vice-versa).

    This article should help you insert custom Javascript code into a WordPress site.

    Hope this helps. Please let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

  • Nahid

    Hey Robert !
    Hope you are having a great day!

    The selectors cannot really be defined anywhere, the ideal process is to inspect the region containers and find their selector using your browser's developer tools. This article explains how to do that in detail.

    In case of Upfront, the selectors of the region containers usually take the names of the respective region itself as the suffix. For example, if the name of your region is "Primary Navigation", the selector of that respective region would be "#upfront-region-container-primary-navigation" where "upfront-region-container" is the predefined part of the identifier and "primary-navigation" is taken up from the name of the region.

    Hope this helps. Let us know if you need any further help regarding this. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.