1. How can we manually change the following aspects of the dark skin full screen menu:
- Hamburger icon (we want it to be red #e22e3c, and not black) - Background color: we want it to be white, as the light skin - Text color: we want the color to be red #e22e3c, and not black - Social media icons: we want them to be red, #e22e3c
2. How can we manually change the following aspects of the light skin full screen menu:
- Hamburger icon: we want it to be red, #e22e3c - Text color: we want it to be red, #e22e3c - Social media icons: we want them to be red, #e22e3c
Last questions: 1. How can we get the mobile menu to act the same way with regards to the colors? Now it is dark, but obviously we want it to look as the desktop menu.
2. We want the hamburger bar to be white when on light skin, and red on dark skin. Both should have red "close" button when the menu is opened. Now everything is red, and I have tried to adjust the code but with no success.
For further questions please create a new ticket instead, as I will set this ticket as solved from here.
If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Hi,
1. How can we manually change the following aspects of the dark skin full screen menu:
- Hamburger icon (we want it to be red #e22e3c, and not black)
- Background color: we want it to be white, as the light skin
- Text color: we want the color to be red #e22e3c, and not black
- Social media icons: we want them to be red, #e22e3c
2. How can we manually change the following aspects of the light skin full screen menu:
- Hamburger icon: we want it to be red, #e22e3c
- Text color: we want it to be red, #e22e3c
- Social media icons: we want them to be red, #e22e3c
?
Hi Fredrikke,
Add this CSS to Custom CSS to make the style changes to the menus:
.main-header.menu-type-full-bg-menu .full-screen-menu nav ul li a { color: #e22e3c !important; } .main-header.menu-type-full-bg-menu .full-screen-menu nav div.menu>ul>li>a:after, .main-header.menu-type-full-bg-menu .full-screen-menu nav ul.menu>li>a:after { background-color: #e22e3c !important; } .main-header.menu-type-full-bg-menu .full-screen-menu .full-menu-footer .social-networks li a { background-color: #e22e3c !important; } .main-header.menu-type-full-bg-menu .full-screen-menu.menu-skin-light.translucent-background { background-color: rgba(255,255,255,1); }Best regards,
Laborator Team
Hi Fredrikke,
I have made the changes on your site and now they are applied and also commented the last CSS which I have added.
Best regards,
Laborator Team
Thank you :D
Last questions:
1. How can we get the mobile menu to act the same way with regards to the colors? Now it is dark, but obviously we want it to look as the desktop menu.
2. We want the hamburger bar to be white when on light skin, and red on dark skin. Both should have red "close" button when the menu is opened. Now everything is red, and I have tried to adjust the code but with no success.
Hi again,
1. Normally it is not possible as the mobile menu has a different structure, so you will have to add this CSS to Custom CSS:
.mobile-menu-wrapper.mobile-menu-fullscreen+.mobile-menu-overlay { background: rgba(255,255,255,0.95); } .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul>li>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu>li>a { color: #e22e3c !important; } .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul>li>a:before, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu>li>a:before { background: #e22e3c !important; }2. Add this CSS to Custom CSS:
.menu-bar.menu-skin-light .ham, .menu-bar.menu-skin-light .ham:after, .menu-bar.menu-skin-light .ham:before { background-color: #FFF !important; }For further questions please create a new ticket instead, as I will set this ticket as solved from here.
If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Best regards,
Laborator Team
Thanks! How can we make the hamburger icon a bit larger?
Hi Fredrikke,
For further questions please create a new ticket instead, as I will set this ticket as solved from here.
Best regards,
Laborator Team
Hi again,
I have added this CSS to Custom CSS:
.menu-bar.menu-skin-light.exit .ham:after, .menu-bar.menu-skin-light.exit .ham:before { background-color: #e22e3c !important; } .menu-bar.menu-skin-light.exit .ham { background-color: transparent !important; }So the menu trigger is showing in red in mobile and desktop, tested it on all the links provided by you.
Best regards,
Laborator Team