One menu item change

Support
#1

Hi together,

I want to change one menu item on my site www.asapunity.com/agentur
I want that the menu item “Netzwerk” has an diffrent backround colour in a rounded form, like a button (a button example on the site). Is that possible?

Best regards,

ASAP

#2

Hi there,

Please add a class to the menu item that you want to style as the button.

You can do so by clicking on the Screen Options that is on the top right part of the page in Appearance > Menus.

Then add this code to the Global CSS:

.x-navbar .desktop .x-nav > li.btn a span {
    background-color: blue;
    padding: 10px 15px;
    border-radius: 20px;
    margin-top: 4px;
}

The code above assumes that the class you added to the menu item is btn . Feel free to update the background color in the code.

Here are some reference links related to the suggestions above:

Hope this helps.

#3

Hi there,

thanks. It works. Thanks. But is it possible to get an RGB colour in the button? Is it also possible to get a rectangular button?

best regards

#4

Hey There,

Yes you can make use of an rgb color and make it square. Simply update the code and use this:

.x-navbar .desktop .x-nav > li.btn a span {
    background-color: #0000ff;
    padding: 10px 15px;
    border-radius: 0;
    margin-top: 4px;
}

We would loved to know if this has work for you. Thank you.

1 Like
#5

Thanks it did work from me as well!
One additional question.
Would it be possible to add a line that can change the text color within that menu

#6

Hi There @patsorules

Upon checking, I see that you have incorrect CSS rules in your custom CSS area.

.x-navbar .mobile .x-nav li.current-menu-item > a{
  color:hsl(hsl(359,100%,1%));
}
.x-navbar .desktop .x-nav > li.current-menu-item > a > span{
  box-shadow:0 2px 0 0 hsl(hsl(359,100%,1%));
}

Notice the issue hsl(hsl(, you need to remove one hsl including parentheses.

For example:
color: hsl(359,100%,1%);

That should resolve the issue.

Let us know how it goes.
Thanks!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.