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

[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

[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

[fradesimon]

Hi,

I added the css in theme options under quick css, Could you please change the mobile header colour to transparent and while your logged in would you please be able to change the background colour of the mobile menu from black to #00943e, many thanks.

Username: simon
Password: master22

[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

[Author]

Posts