CSS question regarding header builder animation

[Pbalazs89]

Hi there,

My question is regarding the header’s css.

http://www.coachingandfamily.com/

1. I would like to achieve the following:

When the menu is at the top of the page, the menu elements dont have an animation on hover (they stay white when hovered over)

However, when I scroll down, the background changes to white, and respectively I’d like the menu items to change to black. Is this possible?

2. Is there a way to add a custom logo as a dropdown menu for the language switcher? My aim is to make is somewhat like this: https://www.dropbox.com/s/kh68j6xtc11pm16/Screenshot%202018-07-11%2008.45.01.png?dl=0

[christopher]

Hi Pbalazs89,

It seems that you already managed to have that. You can always use the .x-bar-fixed as the CSS selector first section when the header is in fixed mode and after you scroll down.

Regarding the drop-down menu, it seems again you managed to have it. In general, you can use the Content Are Dropwond element for that:

Content Area Dropdown | Themeco Docs

Thank you.

[Pbalazs89]

Thanks, one more question:

http://www.coachingandfamily.com/

Contact item in the menu. When I scroll down, it switches to black like the other items. What can I do to overwrite this for only this element, so it stays white?

.e208-12 .x-anchor .x-anchor-menu-item span {color:white !important;} I tried this css, but it does not work. Thanks!

Thanks

[christopher]

Hi @Pbalazs89,

Please go to Appearance > Menus and from the top of the screen click on the Screen Options and enable the CSS Classes:

Then go to the specific menu item in question and add a unique class for that For example: nochange

Then go to Pro > Theme Options > CSS and add the code below:

.x-bar-fixed .x-menu > li.nochange > .x-anchor .x-anchor-text-primary {
    color: white;
}

Imporant: Never use the auto-generated classes such as e208-12 in your customization as those classes can change anytime and are not for the customization. It is recommended that you go to the element in question and click on the Customize tab and add a unique class for that specific element to follow up the case.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[Pbalazs89]

Hi,

Noted about the css and the posting / this question does pertain to my last one so I’ll post it here.

So I tried giving the menu item the class of nochange, but unfortunately in this case, this does not work. The reason for is that it is a WPML menu item and it is not displayed in Appeareance - Menus

Any other idea?

[paul.r]

Hi,

Try to check your primary menu.

You can select from here

Thanks

[Pbalazs89]

Thanks but that’s not it. I sent you the image of the right menu, but WPML elements dont show up here. It’s normal. So I can’t add a class to them. Is there another solution?

[basanta]

Hi There,

You can add custom Class to the element, and a child selector CSS to each menu items.
First, give a class name to the element in the customize section

Then add this Example CSS to your Theme Option -> Global CSS

.customclass li:nth-child(2) {
    background: red;
/* you can add other properties*/
}

This css with target 2nd item. similarly, you can add CSS for other other items too.

Hope this helps!