/* Responsive Menu Region (CSS Part) Update the "main-menu" everywhere below with the name of the popup menu region in your liveSite you wish to be responsive Also include the name of the menu region and update the media queries below to react as desired. This file is intended to be added within your ... area of your Page Styles BEFORE it's companion responsive-menu-region.js file. */ /* hide (mobile) menu button by default */ ul#software_menu_button_main-menu { display: none; } /* set breakpoint when you want the pop up menu to switch to an accordion menu. We recommend (max-width: 480px) for handheld mobile devices */ @media only screen and (max-width: 620px) { /* style and show clickable (mobile) menu button */ #software_menu_button_main-menu { display: block; cursor: pointer; width: 100%; height: 38px; /* adjust if you change the font-size of the menu button icon below */ /* margin-top: -6px; adjust if you change the font-size of the menu button icon below */ margin-top: 5px; /* adjust if you change the font-size of the menu button icon below */ } /* style the (mobile) menu button icon */ #software_menu_button_main-menu > div { color: inherit; /* change icon color */ font-size: 38px; /* change size of the menu button */ width: .75em; height: 0.15em; box-shadow: 0 0.25em 0 0, 0 0.5em 0 0, 0 0.75em 0 0; float: right; } /* set (mobile) menu width to auto */ .menu_main-menu { width: auto; } #software_menu_main-menu.software_menu li li a { width: auto !important; } /* hide (mobile) menu to start (it will be toggled on/off via js whenever menu button is clicked) */ ul#software_menu_main-menu { display: none; } }