Highlighted menu item

shift_ict · May 2022

I need to add a highlighted item to the menu, with a border and a separate background-color, that changes color on hover. Like a 'donate' button inside the menu. Could you provide me with the css to make this possible?

Site is https://kenniscentrumtgg.nl (code ktgg)

Phil · May 2022

Hi,

You can provide the CSS class for certain menu item in Appearance -> Menus

When you do that, please, tell me to which menu item you assigned this class, and I will help you write a CSS code.

Thanks

shift_ict · May 2022

Screen Shot 2022-05-12 at 12.30.02 pm.png

Sadly it doesn't seem to give me the option to assign a CSS Class to the menu item?

The highlighted menu-item is supposed be the 'Doe mee' page. https://kenniscentrumtgg.nl/doe-mee/

Hope you can point me in the right direction of what to do/try next!

Phil · May 2022

Please, open the screen option, and check the CSS Classes checkbox. Then this field will appear.

Thanks

shift_ict · May 2022

Ah thank you, sorry I am still learning :).

So I gave the menu item 'Doe mee' at the bottom, that should be appear in the menu as a button type of item, the CSS class 'highlighted'.

Can you give me further instructions?

Phil · May 2022

Please, use the following CSS code:

#Top_bar #menu > ul > li.Highlighted.hover > a {
 background-color: #00f !important;
 border: solid 2px #0f0!important;
}
#Top_bar #menu > ul > li.Highlighted > a {
 background-color: #f0f !important;
 border: solid 2px #213705!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

shift_ict · May 2022

That worked perfectly for the desktop vertical menu!

This is how I customized your code:

#Top_bar #menu > ul > li.Highlighted.hover > a {

background-color: #839f93 !important;

border: solid 1px #ffffff !important;

margin: 0% 16% !important;

margin-top: 16% !important;

padding: 2% 0% !important;

}

#Top_bar #menu > ul > li.Highlighted > a {

background-color: #6f887a !important;

border: solid 1px #ffffff !important;

margin: 0% 16% !important;

margin-top: 16% !important;

padding: 2% 0% !important;

}

How do I create a version of this that works for the Side Slide menu on mobile?

Phil · May 2022

Please, use this code:

#Side_slide #menu > ul > li.Highlighted > a {
 background-color: #6f887a !important;
 border: solid 1px #ffffff !important;
 margin: 0% 16% !important;
 margin-top: 16% !important;
}

Thanks

shift_ict · May 2022

Thank you! That worked.

One last question about the Side slide menu: do you have some code for me as well to change the on-click color upon selecting a menu item in the side slide? It is currently set to blue and this doesnt suit the overall design and I cannot find the option to change this in the Theme options?

(or maybe I overlooked it?;)

Phil · May 2022

Can you attach a screenshot showing this blue color?

I cannot locate it in your side slide, and I do not want to misunderstand you.

Thanks

shift_ict · May 2022

I cannot screenshot it, as this color only appears for a split second upon clicking a menu item in the side slide. So I called it the 'on-click'-color but have no idea what the real word for it is. Hope you understand what I mean now :)

Phil · May 2022

I tried to achieve that, but I could not see this blue color on the desktop or on iPhone 12 after clicking on the menu item, even for a brief moment.

Are you able to record your screen and send a video showing it, please?

Thanks

shift_ict · May 2022

signal-2022-05-17-210806.mp4.zip

As requested, hope it's properly visible for you! Using an android phone.

Phil · May 2022

Ok, now it is clear to me. ?

Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS.

a{
-webkit-tap-highlight-color: transparent!important;
}

Thanks

shift_ict · May 2022

Yes! Worked!

Highlighted menu item

Comments