[stighetlParticipant]

I bought this theme a week ago, and so far I love it. Unfortunately, it looks like you need basic CSS skills to actually do some changes to the theme, which I don’t have. After searching for awhile, I found out how to change the color of the header. I had to use the code

.x-navbar {
background-color: #DA1157;
}

I have absolutely no idea whatsoever how to change the color of the links. I found some codes at w3school, but they didn’t help.

I really hope someone here can help me. I’m thinking about the color of the active page (orange), and when you hover over a link (also orange).

Thank you!

[ThaiModerator]

Hi There,

Please try with this CSS code:

.x-navbar .desktop .x-nav > li > a {
color: red;
}
.x-navbar .desktop .x-nav > li > a:hover {
color: green;
}

Hope it helps 🙂

[stighetlParticipant]

Thank you very much!

I still have to change the color of the “active” page.

Here you can see what I’m talking about. At the moment I can barely see “Kontakt oss” in the header. The code you gave me worked perfect for the “unactive” pages and hover. Thank you!

[NicoModerator]

Hi There,

You can use this code for hover and current active menu,

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .current-menu-item > a {
color: green;
}

Hope it helps.

Let us know how it goes.

Thanks.

[stighetlParticipant]

Hi! Unfortunately that didn’t help. It looks exactly the same as the picture above (Kontakt oss is still orange).

Here is my full code:

.x-navbar {
background-color: #DA1157;
}
.x-navbar .desktop .x-nav > li > a {
color: black;
}
.x-navbar .desktop .x-nav > li > a:hover {
color: pink;
}
.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .current-menu-item > a {
color: green;
}

As I said, I don’t have any CSS experience at all, but I tried to remove:

.x-navbar .desktop .x-nav > li > a:hover {
color: pink;
}

but that didn’t work either.

[FriechModerator]

Hi There,

Please use the css code below instead.

.x-navbar .desktop .x-nav > li > a {
color: red;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .x-nav > li.current-menu-item > a span {
color: green;
}

If this does not work, there must be conflicting it. If so please provide us the site URL, so we can take a closer look.

Thanks!

[stighetlParticipant]

Thank you very much!

That worked great!
For some reason, when I hold the mouse over “produkter”, it changes to white (the new hover color), but when I move the mouse away, it become orange (the old color), and then goes back to black (the new color) again. I think this might be bacause of the submenu. I hope you understand what I mean.

There is also a orange bar over the menu. Is it possible to change the color of this as well?

Thank you!

[stighetlParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thank you for providing your login credentials.

You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > .x-active > a {
   color:black;
}

You may change black with the color that you like.

Hope that helps.

[stighetlParticipant]

Thank you very much!

Now it’s only the orange bar at the top that has to be fixed, and then everything is perfect!

[RupokMember]

Hi there,

Thanks for updating. It seems you have added this code –

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: 0 4px 0 0 #e74c3c inset;
}

You can change the color or change the box-shadow to none –

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none;
}

Hope this helps.

Cheers!

[stighetlParticipant]

That did work! Everything looks perfect now. Thank you very, very much!

[JadeModerator]

You’re most welcome! 🙂

[Author]

Posts