Debut theme change mobile top menu breakpoint

Store Design
1

Hi, I want to change the top menu breakpoint for desktop and mobile on the debut theme. Currently, the website’s top menu will be changed to the mobile version below 749px width. Is it possible to change the maximum width for it (for example, 900px width)?

Thank you

2

Hi @Ryan_Chandra42

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Can you pls share your store URL with me, so i can check it once in my device and find the exact solution.

Regards,

Santanu

3

Yes, it is possible to change the top menu breakpoint for the Debut theme. Here are the steps to do it:

  1. Go to the “Online Store” section of your Shopify admin panel.
  2. Click on “Themes.”
  3. Find the Debut theme and click on the “Actions” button, then select “Edit code.”
  4. In the file browser, navigate to the “Assets” folder and find the “theme.scss.liquid” file.
  5. In the “theme.scss.liquid” file, find the following code:
@media screen and (max-width: 749px) {
  .site-header__top-bar {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}
    1. Replace “749px” with the desired maximum width, for example “900px”.
    2. Click the “Save” button.
    3. Go to your website to see the changes.

    Please note that changing the theme code may cause unexpected behavior and can negatively impact the design of your website. Before making any changes, it is recommended to create a backup of your theme.

4

Is there a way to do this with the Prestige theme? As screen size reduces one of my menu items moves to the line below just before it switches to the mobile menu. I would like it to switch to the mobile menu sooner. ie. Increase the minimum width the site can be before it switches to a mobile menu. Thanks!