Community Forums › Forums › Archived Forums › General Discussion › Force hamburger menu on desktop (Monochrome theme)
This topic is: resolved
- This topic has 2 replies, 2 voices, and was last updated 5 years, 3 months ago by varonearts.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
August 2, 2019 at 8:40 am #492744varoneartsMember
Hi everyone,
I'm trying to use the hamburger menu all time with the Monochrome theme, and I'm not having any luck.
Does anyone have any experience trying this?
Many thanks
August 2, 2019 at 9:01 am #492746Genesis DeveloperMemberThis CSS codes are added inside the @media queries
.genesis-nav-menu li { float: none; } .genesis-responsive-menu .wrap { padding: 0; } .genesis-responsive-menu { display: none; position: relative; } .site-header > .wrap > .genesis-responsive-menu { transition: none; } .genesis-skip-link .skip-link-hidden { display: none; visibility: hidden; } .menu-toggle, .sub-menu-toggle { border-width: 0; color: #000; display: block; font-family: Muli, sans-serif; margin: 0 auto; overflow: hidden; text-align: center; visibility: visible; width: auto; } .menu-toggle:focus, .menu-toggle:hover, .sub-menu-toggle:focus, .sub-menu-toggle:hover { background: transparent; border-width: 0; box-shadow: none; color: #06c; } .js .genesis-nav-menu > .menu-item .sub-menu > .menu-item:first-child, .js .genesis-nav-menu > .menu-item > .sub-menu > .menu-item:last-child, .js .genesis-nav-menu .sub-menu a, .js #genesis-mobile-nav-primary { background-color: #fff; color: #000; } #genesis-mobile-nav-primary.activated { border-bottom-color: transparent; } #genesis-mobile-nav-primary:focus, #genesis-mobile-nav-primary:hover { color: #06c; } .menu-toggle { float: right; font-size: 15px; font-weight: 400; line-height: 21px; padding-left: 0; padding-right: 0; position: relative; z-index: 1000; } .menu-toggle::before { font-size: 20px; margin-right: 5px; text-rendering: auto; vertical-align: bottom; } .sub-menu-toggle { background: transparent; float: right; font-size: 14px; padding: 10px; position: absolute; right: 0; top: 2px; z-index: 100; } .sub-menu-toggle::before { display: inline-block; text-rendering: auto; transform: rotate(0); transition: transform 0.25s ease-in-out; } .sub-menu-toggle.activated::before { transform: rotate(180deg); } .genesis-responsive-menu .genesis-nav-menu .menu-item { display: block; float: none; position: relative; text-align: left; } .genesis-responsive-menu .genesis-nav-menu .menu-item:focus, .genesis-responsive-menu .genesis-nav-menu .menu-item:hover { position: relative; } .genesis-responsive-menu .genesis-nav-menu a:focus, .genesis-responsive-menu .genesis-nav-menu a:hover, .genesis-responsive-menu .genesis-nav-menu .sub-menu .menu-item a:focus, .genesis-responsive-menu .genesis-nav-menu .sub-menu .menu-item a:hover, .genesis-responsive-menu.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a { color: #06c; } .genesis-responsive-menu .genesis-nav-menu .menu-item a, .genesis-responsive-menu .toggle-header-search { border: none; margin-bottom: 1px; padding: 15px 20px; width: 100%; } .genesis-responsive-menu.nav-primary .genesis-nav-menu .sub-menu a { color: #000; } .genesis-nav-menu > .menu-item .sub-menu > .menu-item:first-child { padding-top: 0; } .genesis-nav-menu > .menu-item .sub-menu > .menu-item:last-child { padding-bottom: 5px; } .genesis-responsive-menu .genesis-nav-menu .sub-menu::after, .genesis-responsive-menu .genesis-nav-menu .sub-menu::before, .genesis-responsive-menu .genesis-nav-menu > .menu-item-has-children > a::after { content: none; } .genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu, .genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu { left: 0; margin-left: 0; } .genesis-responsive-menu .genesis-nav-menu .sub-menu { clear: both; display: none; margin: 0; opacity: 1; padding-left: 15px; position: static; width: 100%; }
You will put them outside of the @media query.
August 2, 2019 at 9:35 am #492750varoneartsMemberBrilliant, many thanks!
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- The topic ‘Force hamburger menu on desktop (Monochrome theme)’ is closed to new replies.