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:

    #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

  • 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:

    #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

  • 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.

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

    Thanks

  • Yes! Worked!

Sign In or Register to comment.