Posted by Sasha on Sat, Jan 06, 2024 - 8:08am

I am building a site using the Axioma theme. The "hamburger" menu appears automatically on the phone screen but is not an option for the laptop screen. How can I use it as a default for the website? If there is another theme that does this, I will switch themes.

Thank you.

Comments

Sat, Jan 06, 2024 - 10:03am by laryn

You should be able to set the breakpoint/width that the hamburger shows up in the global menu settings: admin/structure/menu/settings

So if you set this to a larger number, the hamburger will show up for all widths smaller than that size (if the menu is configured to show the hamburger in the individual menu block configuration).

Sat, Jan 06, 2024 - 10:12am by tkcent

Aha!  Thanks Laryn, I didn't realize that was available.  Ignore my post, although it may be helpful for other customizations.

Sat, Jan 06, 2024 - 10:11am by tkcent

Probably won't find this option with most themes.  However, by creating a sub-theme of Axioma and adding a little bit of CSS, you can make it work.

1.  Create a sub-theme.  Best not to mess with the CSS directly since you will lose any modifications if the theme gets updated (which I understand to be in the works).

        https://docs.backdropcms.org/documentation/creating-sub-themes

2.  Add your own CSS.  The visibility of the menu icon is controlled by media queries.  Look in the following file on line 20:

        axioma/css/components/menu-toggle.theme.css

@media (min-width: 48em) {  /* 768px @ 16px font size */
  /* hide the button in desktop view */
  .menu-toggle-button,
  .menu-toggle-state {
    display: none;
  }
}

If you copy that media query to a CSS file for your custom theme you can change the width at which it disappears (48em) or make it visible all the time.