Action Bar Boundless Theme shows submenu on homepage rather than main menu

VeronicaTeo
Tourist
15 0 3

Hi,

I have just implemented the Boundless theme for my new website and the action bar shown first on homepage is displaying the dropdown menu from my latest navigation menu item.

I have the option to press the left arrow and it takes me back to the main menu. I don't want this though. I would prefer to have the main menu showing first thing rather than a submenu.

Please see the screenshot.

Thank you.

Screenshot 2021-07-01 at 19.45.40.png

Replies 10 (10)

diego_ezfy
Shopify Partner
2935 562 883

Hello @VeronicaTeo,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

VeronicaTeo
Tourist
15 0 3

Hi Diego,

My URL is https://letsevulve.com

Thanks,

V

diego_ezfy
Shopify Partner
2935 562 883

@VeronicaTeo 

1. From your Shopify admin, navigate to Online Store > Themes > Customize.

customize123-1200x530

2. Select "action bar" on the left, and from there choose the menu you'd like to display.

diego_ezfy_1-1625166640765.png



You can configure the menus at Online Store > Navigation.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

VeronicaTeo
Tourist
15 0 3

Hi Diego,

Thank you, the main menu is selected already, please see screenshot.

However on homepage when I first access the website, it shows a submenu from the main menu (the latest submenu items from my main menu). Once I click on the left arrow, it brings me back to the main menu. But I don't want my customers to get confused, I want them to first see the main menu and then select whichever item they want.

Thanks.

 

Screenshot 2021-07-01 at 20.19.49.png

VeronicaTeo
Tourist
15 0 3

This is what it should show first when I access the page instead of a submenu. The last navigation dropdown menu called "Extra" is the one that has the submenu items used on homepage instead. Let me know if it makes sense. Basically for some reason, the action bar uses the latest dropdown menu items from the main menu instead of the main menu directly.

Thanks,
V

Screenshot 2021-07-01 at 20.25.26.png

diego_ezfy
Shopify Partner
2935 562 883

1. Please send a screenshot of both your navigation menu at online store > navigation and the one you see at the customize page
2. Have you tried opening the website in an incognito page and also in a different web browser? It could be a cache issue.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

VeronicaTeo
Tourist
15 0 3

Hi Diego,

Please see attached. I have tried incognito and another browser, still the same issue.

Do you think it might be from the code? Let me know if you know what to edit.

Thanks,

V

Screenshot 2021-07-02 at 10.54.32.pngScreenshot 2021-07-02 at 10.56.47.png

diego_ezfy
Shopify Partner
2935 562 883

@VeronicaTeo 

When you click on the "left" arrow to show the previous choices it seems to show up the menu you have configured in the customize page:

diego_ezfy_0-1625225764614.png

 

diego_ezfy_0-1625225260354.png

I'm not sure whether this is how the theme is setup or if you have more menus attached to it elsewhere in the configurations, however you can add the following code to automatically click on the "left" arrow whenever the page loads:


1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<script>
window.ezfy = window.ezfy || {};

ezfy = (function () {

  function _waitForElement(selector, delay = 50, tries = 250) {
    const element = document.querySelector(selector);

    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        setTimeout(resolve, delay);
      });
    }

    if (element === null) {
      if (window[`__${selector}`] >= tries) {
        window[`__${selector}`] = 0;
        return Promise.reject(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }


  async function showPrevious() {
  	
  	var $btn = await _waitForElement(`.action-bar--show button[aria-controls="SiteNav"]`);

$btn.click();

  }

  return {
    init: function () {
      document.addEventListener("DOMContentLoaded", function () {
 
      });

      window.addEventListener("resize", function () {});

      window.addEventListener("load", function () {
      	       showPrevious();
      });

      window.addEventListener("scroll", function () {});
    },
  };
})();

ezfy.init();
</script>

 



Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

VeronicaTeo
Tourist
15 0 3

Hi Diego,

Thank you, it does sort the problem initially but the action bar seems to not work properly anymore and the submenus don't show at all.

For example, I press on the menu item called "**bleep**" and it takes me to homepage rather than to the subcategories page. When I press "**bleep**" it takes me to the "Vibrators" categories, please see screenshot. Let me know what you think.

Can we have this change happening only when you land on homepage and the rest of the functionality of the action bar to continue to be the same?

Thanks.

Screenshot 2021-07-02 at 16.04.45.png

VeronicaTeo
Tourist
15 0 3

Hi Diego,

I have found another solution by rearranging the navigation and it works fine now.

Thank you very much for your help though.

Take care,

V