Navbar without hamburger unnecessary css
Author: Stelu77Created Mar 28, 2024Updated Oct 23, 2025
Describe the bug When using the mj-navbar without hamburger menu there are still a large CSS block rendered in the head for the menu feature.
To Reproduce Try it out sample
Expected behavior This css block should only be rendered in HTML if hamburger attribute are set.
<style type="text/css">
noinput.mj-menu-checkbox {
display: block !important;
max-height: none !important;
visibility: visible !important;
}
@media only screen and (max-width:480px) {
.mj-menu-checkbox[type="checkbox"]~.mj-inline-links {
display: none !important;
}
.mj-menu-checkbox[type="checkbox"]:checked~.mj-inline-links,
.mj-menu-checkbox[type="checkbox"]~.mj-menu-trigger {
display: block !important;
max-width: none !important;
max-height: none !important;
font-size: inherit !important;
}
.mj-menu-checkbox[type="checkbox"]~.mj-inline-links>a {
display: block !important;
}
.mj-menu-checkbox[type="checkbox"]:checked~.mj-menu-trigger .mj-menu-icon-close {
display: block !important;
}
.mj-menu-checkbox[type="checkbox"]:checked~.mj-menu-trigger .mj-menu-icon-open {
display: none !important;
}
}
</style>MJML environment (please complete the following information): Try it out editor.
Source: mjmlio/mjml