Highlight button/menu item enfold theme - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 8, 2020 at 1:20 pm #1265743

Stevenhensen89
Participant

Hello,

Is it possible to highlight a menu item?

For example the same as you did on your website (kriesi.at) to jobs (the number 4)!
The other option that i’m looking for is to highlight one menu item and change it into a ‘button’.

Please check this website as an example: https://normecfoodcare.com/ (orange button QA Software)

Thanks!

Steven

December 8, 2020 at 11:09 pm #1265863
cherrmann
Participant
Hello,

just find the ID and use CSS like so:
```
li#menu-item-1812 * {
    background-color: orange;
    color: white;
}
li#menu-item-1812 a:hover {
    background-color: red;
    color: black;
}
```
December 9, 2020 at 12:50 am #1265884

Jordan Shannon
Inactive Moderator

Hi,

Thank’s for the input on this. Please let us know if that suggestion works.

Best regards,
Jordan Shannon

January 4, 2021 at 9:09 pm #1270248

Stevenhensen89
Participant

Thanks @cherrmann. It works. See http://www.greywise.nl

But how do I add a number to a menu-item, like the number 4 at the kriesi.at website to the menu item ‘JOBS’?

January 5, 2021 at 1:08 pm #1270389
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
li#menu-item-1812 .avia-menu-text:after {
    content: "4";
    font-size: 9px;
    color: #FFF;
    background: #42A0BD;
    line-height: 17px;
    width: 17px;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    position: relative;
    top: -9px;
    left: 2px;
}
```
Best regards,
Rikard
January 12, 2021 at 4:33 pm #1271944

Stevenhensen89
Participant

Ok, cool! It works.

What do I need to do when I want the number in de subheading?
https://greywise.nl/ –? For example a number 2 in the corner from menu-item ‘Nieuws’!

Thanks!

January 13, 2021 at 1:28 pm #1272147
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
#header_meta #menu-item-10799 a {
    content: "2";
    font-size: 9px;
    color: #FFF;
    background: #42A0BD;
    line-height: 17px;
    width: 17px;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    position: relative;
    top: -9px;
    left: 2px;
}
```
You might have to tweak the numbers around a bit, since they might be a bit too big for that menu item.

Best regards,
Rikard
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.