Docs

[christiaanakkermans]

Hi,

I’m styling the buttons in the navbar. But now I have far to much white background. I attached an example of the situation now, and what I want to accomplish. Could you have a look and help me with this?

I also want some space between the white hover backgrounds of the link items.

The css I am using now is:

.menu-item-5008 a {
color: #000000 !important;
background-color: #ffffff;
border-radius: 25px;
}

.menu-item-5008 a:hover {
background-color: #ffffff !important;
}

.menu-item-5008 a:hover span {
color: #000000;
}

.menu-item-5009 a:hover {
background-color: #ffffff !important;
border-radius: 25px;
}

.menu-item-5009 a:hover span {
color: #000000;
}
.menu-item-4811 a:hover {
background-color: #ffffff !important;
border-radius: 25px;
}

.menu-item-4811 a:hover span {
color: #000000;
}
.menu-item-4712 a:hover {
background-color: #ffffff !important;
border-radius: 25px;
}

.menu-item-4712 a:hover span {
color: #000000;
}
.menu-item-5094 a:hover {
background-color: #ffffff !important;
border-radius: 25px;
}

.menu-item-5094 a:hover span {
color: #000000;
}
.menu-item-5118 a:hover {
background-color: #ffffff !important;
border-radius: 25px;
}

.menu-item-5118 a:hover span {
color: #000000;
}

Hope you can tell me what I am doing wrong. Thnx!
Gr, Chris

[christiaanakkermans]

This reply has been marked as private.

[Thai]

Hi There,

Please remove your custom CSS and try with this CSS instead:

.x-navbar .desktop .x-nav > li#menu-item-5008 > a {
    padding-top: 14px;
}
.x-navbar .desktop .x-nav > li#menu-item-5008 > a:hover > span {
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
}

Hope it helps 🙂

[christiaanakkermans]

Hi,

It does not quite work:

– for #menu-item-5008: when I hover now, it is perfect. But I want this to be standard (so also like this when not hovering).

– when NOT hover #menu-item-5008, it is now not showing in correct line..

– the other menu items I want to be like this ONLY when hover..

How do I have to adjust the code correctly?

Gr. Chris

[Christopher]

Hi there,

Please find and remove following codes :

.x-navbar .desktop .x-nav > li#menu-item-5008 > a {
    padding-top: 14px;
}
.x-navbar .desktop .x-nav > li#menu-item-5008 > a:hover > span {
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
}

Add this :

.x-navbar .desktop .x-nav > li#menu-item-5008 > a span {
    padding: 4px 15px;
margin-top: -10px;
background-color: #fff;
    border-radius: 15px;
    color: #000;
}
.x-navbar .desktop .x-nav > li > a > span {
    margin-right: -0.003em;
    padding: 4px 15px;
}
.x-navbar .desktop .x-nav > li > a:hover span {
    background-color: #fff;
    border-radius: 15px;
    color: #000;
}

On the side note, you didn’t close curly bracket, please see the attachment. If you don’t close the curly bracket all codes below media query rule consider within media query rule.

Hope it helps.

[Author]

Posts