Change the Sidebar menu for larger Screens to us Hamburger-Menu

Hi Nathan, our team is happy to answer any questions you have about working with our Crio WordPress theme on your website!

It sounds like you are trying to change the behavior of your menu display on desktop screen sizes to show up with the Hamburger configuration instead of the expanded menu, is that correct? If so, then we actually had another user ask about a similar configuration in the past and we were able to help them created that design by using some Custom CSS in Crio. Their layout did not use the sidebar header configuration, but there’s a good chance that the code will have a similar effect. Here is the CSS that turned their menu into a Hamburger on desktop:


@media only screen and (min-width: 768px) {
.standard-menu-enabled input:not(:checked):not(.hidden)~.sm-clean {
display: none;
}
.standard-menu-enabled label[id$=-menu-btn] {
position: relative;
top: unset;
}
#main-wrap {
display: flex;
}
}


If that code doesn’t work for you, could you send us a link to your website so our team can take a look at the page markup and figure out a better way to tailor the code to your specific configuration?

Hopefully that CSS gives you the design you are looking for and please let us know if there is anything else that we can do to help!

Hi Nathan-

You can use the Website field in the reply form here, and it will only be visible to our team and not displayed publicly.

If you’ve purchased a BoldGrid Premium product, or if you’re hosting with one of our Platinum WordPress Hosting partners, you can also use the Premium Support ticketing feature in your BoldGrid Central Account: https://www.boldgrid.com/central/account/help/premium

Thank you for providing that link to your website Nathan!

I looked at the rules on that page and created some new rules which should get the Hamburger menu working on desktop displays. You can replace all of the previously provided CSS with the following rule:


@media only screen and (min-width: 768px) {
.flexbox .header-left.standard-menu-enabled input:not(:checked):not(.hidden)~.sm-clean {
display: none;
}
#main-wrap {
flex-direction: column;
}
.standard-menu-enabled label[id$=-menu-btn] {
position: relative;
top: 0;
align-self: flex-start;
}
}


Hopefully these new CSS rules help you get the design you are looking for on your website and please let us know if you have any other questions for us!