Hamburger Menu for mobile

Ask the community
, ,
1

Question:
I am looking to add different hamburger menus for only mobile view on different pages. Is that possible?

Product:
Wix Studio Editor

What are you trying to achieve:
I want to have different menus for different pages, i was able to do this but I am not able to set the same functionality using hamburger menu for mobile, Is there something that I am missing?

Because when I try to change the hamburger menu on a particular page it is getting reflected on all pages, where in I want to have separate hamburger menu on some particular page.

For eg: I have a main menu, which I want to display on all pages apart from country pages(where in I have like 10country pages) I want to display a different menu for country pages which i am able to change but for mobile I have a hamburger menu, which I am not able to change, It has an option to select a different menu for mobile, when selected it is reflecting on all pages but that is not the case with the desktop menu.

Desktop menu works absolutely fine, as it display the specific menu that I want to show, but this is not happening with the hamburger menu.

Can you please help me fix this.

Thank You

2

While Wix Studio Editor doesn’t currently allow for entirely different mobile menus based on the page through a single master section, there is a clever workaround using multiple master sections:

  1. Master Sections for Different Menus: Create two master sections, one with the main menu and another with the country-specific menu.
  2. Assign Master Sections: Assign the main menu master section to all pages except the country pages. Assign the country-specific menu master section to all your country pages.
  3. Mobile Breakpoint Adjustments: Within each master section, use the mobile breakpoint editor to adjust the hamburger menu icon, functionality, and potentially hide desktop menu elements that might clutter the mobile view.

Benefits:

  • Unique Mobile Menus: This approach allows you to have entirely different functionalities and appearances for the hamburger menu on mobile for different page sections.
  • Maintains Responsive Design: You won’t need separate mobile pages, keeping your website up-to-date with responsive design practices.

Limitations:

  • Additional Work: Creating and managing multiple master sections requires some extra effort.
  • Limited Mobile Menu Customization: While you can achieve different functionalities, complete customization of the hamburger menu itself (like the icon style) might be limited within each master section.
3

Hi,

Thanks for your quick response to this

What are Master section in wix studio? Is it the global section

I have followed the same process by using global sections as you have mentioned and by using the breakpoints I have designed the hamburger but still when I change the hamburger menu on one page it is getting updated on all pages

4

You’re right, Master Sections and Global Sections are essentially the same thing in Wix Studio. They both allow you to create a reusable section of content that appears on multiple pages of your website.

Here’s a breakdown of how they work:

  • Global Section: When you create a Global Section, you define a single section that can be added to any page on your site. Any changes you make to the Global Section will be reflected everywhere it’s used. This is ideal for elements that should be consistent across your entire website, like headers, footers, or navigation bars.

Using a Different Section on a Specific Page

If you want to have a different section on a particular page compared to the rest of your site, here’s what you can do:

  1. Remove from Page: Navigate to the page where you want a different section. Click on the Global Section you want to remove.

  2. Choose Another Section: You can then edit the detached section or replace it with a completely different section entirely. This gives you more control over the layout and content of that specific page.

Don’t accidentally select the Detach for master Look for options like “Remove from Page”

In Summary:

  • Use Global Sections (or Master Sections) for consistent elements across your website.
  • Remove Global Section from a page if you need a unique layout or content for that page.

I hope this clarifies the concept of Global Sections and how to use them effectively in Wix Studio!

5

Appreciate your response on solving this.

It is clear now, I was able to get it when I completelly deleted it & redo it.

Can you please also let me know how can I edit the Tags page, I have alot of space on this page but I am unable to remove it. #BusinessVOICES (bnifoundation.org)

Thank You

6

Unfortunately, I can’t directly access editors, but to assist you further, we’d be happy to take a look if you grant us access. Here’s our email for reference: cmswixblocks@gmail.com

In the meantime, you can try checking the following:

  1. Open the section editor: Locate the section where you’re experiencing the spacing issue and open its editor.
  2. Access the side panel: Look for the panel that controls section properties, it on the right side on your editor.
  3. Check the grid layout: Within the side panel, find the settings related to the grid layout. This might be called “Grid,” “Columns,” or something similar.
  4. Review calibration: Ensure the grid settings are configured as expected. You might need to adjust spacing values or gutter widths.

If you’re still having trouble after checking these settings, please don’t hesitate to reply with more details or grant us access to the editor via the email provided.