Navigation menu's button's text's color to white

Shapely
1

Hi,

My website is www.ohlala.hr

I am trying to change the color of the text of the “kontakt” button to white.

This is my CSS:

.menu-item-2055 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 2px solid #724566;
  font-size: 12px;
  border-radius: 20px;
  color: #ffffff !important;
	background-color: #724566;
}

However, I don’t understand why color: #ffffff !important; doesn’t make the text white.

Thanks,
Larper

2

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*change menu color link*/
li#menu-item-2055 a {
    color: white;
}

Best regards,
Support.

3

Thanks!

While I have you here, can you also help me with CSS regarding the border of the button.

It looks like this now:

https://i.imgur.com/Wf7LIdm.png

bottun now
bottun now1769×406 118 KB

And I want to make it look like this:

https://i.imgur.com/rpwMEaq.png

bottun want
bottun want1769×406 130 KB

This is my current CSS code:

.menu-item-2055 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 2px solid #724566;
  font-size: 12px;
  border-radius: 20px;
  background-color: #724566; 
}
4

Thanks!

While I have you here, can you also help me with CSS regarding the border of the button. I want to make the border smaller.

It looks like this now:

https://i.imgur.com/Wf7LIdm.png

bottun now
bottun now1769×406 118 KB

And I want to make it look like this:

https://i.imgur.com/rpwMEaq.png

bottun want
bottun want1769×406 130 KB

This is my current CSS code:

.menu-item-2055 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 2px solid #724566;
  font-size: 12px;
  border-radius: 20px;
  background-color: #724566; 
}
5

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the menu border by going to Appearance > Customize > Additional CSS and pasting it there.

/*Menu border*/
.menu-item-2055 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    border: 1px solid #724566;
    border-radius: 5px;
    background-color: #724566;
}

.nav-bar {
    height: 55px;
    line-height: 30px;
    padding-top: 11px;
}

Best Regards,
Support

6

Thank you very much.

It’s better now but not quite as I like it to be. The top border is better but the bottom border is still too big.

I tried using padding-bottom but nothing changed.

How do I make the bottom border smaller?