Modular Theme - how do I change the manin menu from hamburger to horizontal and overlaying image?

Highlighted
Tourist
4 0 1

https://themes.shopify.com/themes/modular/styles/hoxton/preview

Example in link of menu I am seeking. 

Thanks for your help!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
801 41 123

Hey, @Leah14!

As this is a third party theme I cannot be 100% sure, but it seems to be behaving the same as the Brooklyn theme behaves once there are too many menu items in the navigation header. Brooklyn can only take 3 or 4 (possibly 5) items in the navigation at the top of the site before it contracts from a horizontal menu to a hamburger menu. It also depends on the size of the words used in the menu item! Basically, the menu items can only take up a certain amount of space, and once it goes over that amount the menu will contract into a hamburger menu. For example with this theme you've linked, when I test it with the main menu in my test store, it shows as a horizontal menu. This is because I have 'shop' and 'home' set as menu items, just two short words that don't take up a lot of space:

05-14-tc8lo-yym3j

 

But when I use my Footer menu instead, which has several different items, it shows like this:

 

05-17-2nd7a-emepb

 

I would recommend experimenting with different menu items. Perhaps some items can be placed in the Footer menu instead to free up some space in the header menu? It's also important to note that the screen size on the device you're viewing the store on can also affect this, as if I move from a smaller laptop screen to a larger desktop screen, my full footer menu can now be seen (as the desktop screen allows for more space)

 

05-21-116p0-94txm

 

So that would be something to take into consideration also! Do you currently have a lot of menu items?

 

Speak soon!

Ava
Social Care | help.shopify.com

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 1

Thank you so much for replying! Yes I had figurd that one out, my question was more around getting the horizontal menu to appear on the slide show (image 2) rather than above (image 1). 

Screen Shot 2020-11-09 at 4.01.56 pm.png

Screen Shot 2020-11-09 at 4.01.41 pm.png

0 Likes
Highlighted
Shopify Staff
Shopify Staff
801 41 123

Ah, I see!

Thanks for clarifying! I've just been testing out some theme settings in the trial of the Modular theme, I might have found the answer for you! It looks like you might be using The Chelsea or Mayfair style rather than the Hoxton style. Each theme usually comes with 1-3 different styles, they can make the theme look a little different. To change the theme style, you can go to the storefront theme editor where you are testing the theme, and scroll to the bottom of the sidebar menu, and select Theme Settings. From here, you can select Theme Style at the bottom for the next menu. Here, you can select the style! I've made a short video here for you on how to do this.

 

Let me know if that works for you!

Ava
Social Care | help.shopify.com

 

 

 

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 1
Thank you so much! That’s very helpful!
Highlighted
Tourist
4 0 1

Hi Ava

I am wondering whether you could answer another question for me regarding the Modular theme? Below image shows two buttons Learn More and Shop Now - I have not changed these. The Learn More button is linked to Product Page and Shop Now doesn't link to anything. I can't find where to edit these buttons, can you help?

Thank you!

Screen Shot 2020-11-17 at 3.57.25 pm.png

0 Likes