Highlighted menu item
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)
Comments
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
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!
Please, open the screen option, and check the CSS Classes checkbox. Then this field will appear.
Thanks
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?
Please, use the following CSS code:
Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.
Thanks
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?
Please, use this code:
Thanks
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?;)
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
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 :)
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
As requested, hope it's properly visible for you! Using an android phone.
Ok, now it is clear to me. ?
Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS.
Thanks
Yes! Worked!