Transparent mobile menu

[fradesimon]

Hi,

How do i set the mobile menu to be transparent instead of black?

 

Many thanks

[Laura]

Hello, below the mobile menu there is nothing so it can’t be transparent, however if you want me to adjust it and move it so it looks like on desktop please share wp-admin access 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[fradesimon]

Hi,

Im so sorry when i said mobile menu i meant the mobile header so i just need the css code to make it transparent, Sorry.

Thank you

[Kieran_SQ]

Hi,

As per Laura’s reply there is no content behind the mobile menu so you won’t be able to set it to transparent as is. You can however change the color by using the below CSS in your KLEO Child theme’s style.css by going to Appearance > Editor > KLEO Child > Style.css or Theme Options > General Settings > Scroll to: ‘Quick CSS’

COPY CODE

@media (max-width: 991px) {
.kleo-navbar-fixed.navbar-transparent #header {background-color: #000000;}
}

Change #000000 to your desired color and purge your website cache and mobile device cache to see the changes.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[fradesimon]

Hi thanks for this, i have added the css code but it hasn’t seemed to have change anything.

[Kieran_SQ]

Hi,

Can you update this ticket, in a private reply, with admin credentials for your site so I can check this out.

Also please let me know the color value you wish to use and where you added the CSS.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[fradesimon]

This reply has been set as private.

[Kieran_SQ]

Hi,

As per my earlier reply you cannot realistically set the color of the header on mobile to transparent but I have followed your wishes and set the transparency for you with the below CSS. This sets the color for the whole of the mobile header and as such causes issues with your secondary request.

COPY CODE

@media (max-width: 991px) {
.kleo-navbar-fixed.navbar-transparent #header {
    background-color: rgba(255, 255, 255, 0);
}
.secondary-menu.navbar-collapse.nav-collapse.in {
    background-color: #00943e;
}
}

Please clear your caches to see the changes. You can remove the CSS by going to WP Admin > Theme Options > General Settings > Option: Quick CSS.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts