Docs

[u_oculyze]

Currently on my site selected items sometimes show a thick border around them.

As an example see the drop-down menu here:
http://www.oculyze.de/better-brewing-yeast-counter-yeast-viability/#quote

I would like to customize the look of this border:
– I would like it to be thinner everywhere (on all pages)
– and a different color on certain pages (e.g. other color on better-brewing than on the home page)

Also I would like to know how to disable the border completely.

I tried looking through the menus and also searched on the forum but didn’t find an answer.

Thanks in Advance!

[Friech]

Hi There,

Thanks for writing in! Are you referring to that red line above the menu? If so, you can add this under Custom > CSS in the Customizer.

header .x-navbar .desktop .x-nav > li > a:hover,
header .x-navbar .desktop .x-nav > .x-active > a,
header .x-navbar .desktop .x-nav > .current-menu-item > a {
		box-shadow: inset 0 3px 0 0 rgb(239,66,111);
}

Adjust the 3px value for a much thinner or thicker line. Replace the rgb value (239,66,111) for a different color. Make it box-shadow: none; to completely disable it.

Hope it helps, Cheers!

[u_oculyze]

Thanks for the quick reply.

Unfortunately the code did not affect the border around the dropdown menu. It did change the thickness of the line at the top menu though, which I actually like to keep. I only want to change or disable it for the dropdown menu.

[Christian]

Hey there,

Please add the code below in your Appearance > Customize > Custom > Global CSS

.desktop .sub-menu {
    box-shadow: none;
}

Hope that helps. 🙂

[u_oculyze]

Also didn’t work

[Joao]

Hi There,

Would you mind providing a screenshot to clarify what you are referring to?

Thanks,

Joao

[u_oculyze]

sure, attached

[Thai]

Hi There,

Try adding the following CSS under Customizer > Custom > Edit Global CSS:

a:focus, 
a.x-btn:focus, 
select:focus, 
input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="submit"]:focus, 
input[type="checkbox"]:focus, 
input[type="button"]:focus {
        outline: none !important;
}

Hope it helps.

[u_oculyze]

Excellent that did the trick. Thank you!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts