Semi-transparent background for the menu

[yjmhugues]

How can I change the ccs is child theme to make a semi-transparent background for the menu (like when you scroll)? Where can I change the color of the menus text?
Thanks in advance for your help.

[Radu]

Hello,

You can do the menu transparent by navigating to Wp-Admin -> Theme Settings -> Header Options -> Set ON Transparent Main Menu ( see attachment )

For the font color changing use this CSS.

COPY CODE

.navbar-transparent.on-dark-bg #header .logo a, .navbar-transparent.on-dark-bg .navbar .navbar-nav>li>a, .navbar-transparent.on-dark-bg .navbar .navbar-nav .caret:after {
color:red;
}

Add this code to Theme Options -> General Settings -> Quick CSS area, or you can paste this code to kleo-child/style.css

Replace red with your desired color.

Cheers

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

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[jetatomic]

How can I change the ccs is child theme to make a semi-transparent background for the menu (like when you scroll)?

I think what @yjmhugues asked is how to add something like:
background-color: rgba(0, 0, 0, 0.4);
…to the main menu background. When Transparent Main Menu is set: ON, the menu is completely transparent before scrolling, then changes to 0.4 (or 0.41) after scrolling. So how do we set it to have a semi-transparent background before and after scrolling?

I am trying to do the same thing, and tried the following selector but can’t get it to work.
.kleo-main-header.header-normal {background-color: rgba(0, 0, 0, 0.4);}

Note: I was able to change the text color as @Radu described for testing purposes, but can’t select the background of the entire header. Can you please clarify?

Attachments:

You must be logged in to view attached files.

[sharmstr]

Put !important on it.

COPY CODE

.kleo-main-header.header-normal {
  background-color: rgba(0,0,0,0.4) !important;
}

Sorry, I dont understand your section question.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[jetatomic]

Works as expected. Thanks everyone.

[mpiroh]

How to do semi-transparent menu for SweetDate template? I mean the theme is great! but main menu style looks a bit outdated

Thanks 🙂

[Radu]

Hi Mpiroh,

The sweetdate has have already semi transparent menu , live here : http://seventhqueen.com/demo/sweetdatewp/

If you want to have more transparency use this css

COPY CODE

.sticky.fixed {background: rgba(0, 0, 0, 0.4) !important; }

Best Regards

Radu

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

What support service includes ? What not ?

[DDArt]

Mine the following worked the way I wanted, I just have to tweak text..

COPY CODE

.kleo-main-header.header-normal {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.sticky.fixed {background: rgba(255, 255, 255, 0.6) !important; }

.kleo-main-header.header-normal {background-color: rgba(255, 255, 255, 0.6);}

Hope this helps someone..

[Radu]

Hi DDArt,

What do you need ? a more visible font color ? please provide link to view your menu

Cheers

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

What support service includes ? What not ?

[DDArt]

Sorry for the delay but should’ve looked into it more, I fixed it and used the following css to get what I wanted:

COPY CODE

.navbar-transparent.on-dark-bg
#header .logo a, .navbar-transparent.on-dark-bg .navbar .navbar-nav>li>a, .navbar-transparent.on-dark-bg .navbar .navbar-nav .caret:after {
color:red;
}
*/
.kleo-main-header.header-normal {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.sticky.fixed {background: rgba(255, 255, 255, 0.6) !important; }

.kleo-main-header.header-normal {background-color: rgba(255, 255, 255, 0.6);}

Hope this helps someone else out.

[Radu]

Great !

Thank you for providing your solution

Cheers

RAdu

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

What support service includes ? What not ?

[Author]

Posts