- Posts
What would be the CSS to apply a background color & transparency, only to Hamburger Menu displays? I am fine with the desktop style but when viewed on phone or tablet, the background header image makes reading the hamburger dropdown hard to read.
Thanks for your help!
RobHi Rob, our team is happy to help you customize your hamburger menu in Crio!
The Custom CSS tool available in the Crio Customizer controls will allow us to create a media query that targets only the mobile and tablets displays of your website. The following CSS rule should change the background color of the items in your menu when viewed on a smaller screen size:
@media (max-width: 767px) {.bgtfw-menu-wrap .bgc-template-header-menu .menu-item { background-color: #ffffff !important; } }The current color hexcode in that rule will add a white background to the menu items for screen widths smaller than 768 pixels and you can change that color value to any other that might fit better with your website’s design.
I hope that everything goes smoothly with implementing that code and please let us know if you have any other questions!
Hi
I believe I have the same question. In that within the Ciro theme, my Hamburger menus have a solid black background. I wish to change the colour of these or make them transparent on any type of device screen.Thanks.
laHi la gaspard, our team is happy to answer any questions you have about working Crio on your website!
One possible explanation for the dark background on your submenus is that you do not have a Header background color selected in the Customizer controls. To set a background color for your Header, open up the Customizer and navigate to Design > Header > Background. Select an option from the palette under the Background Color control section and publish your changes. The submenus should then start using the color assignment you selected in that palette.
Please let us know if you have any other questions for us!
- The topic ‘CSS for Crio Hamburger Menu only’ is closed to new replies.
