Docs

[stormgoose]

When I click on a navigation bar option or a hyperlink in a page, it buts a big thick box round everything momentarily (actually, the hyperlink box sometimes linger). Stylistically I’m not a fan of this – so could you tell me the CSS to both reduce the side of the line, and indeed to turn it off altogether?

I’ve tried doing a screenshot of what I mean, but getting the timing on it is impossible!

Many thanks 🙂

[Rahul]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[stormgoose]

This reply has been marked as private.

[stormgoose]

Hopefully you got my private message with login details and ORL – any thoughts?

Many thanks 🙂

[stormgoose]

*URL

[Joao]

Hi There,

This is a confirmed bug and only happening on Firefox, this was already reported to our Dev Team and they are working on it, for the moment please follow this instructions:

Please go to your dashboard / Appearence / Customizer / Custom / CSS and add the following code:

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
    outline: none;
}

Hope that helps,

Joao

[stormgoose]

That worked perfectly – many thanks.

I had wondered, as it seemed a bit of a tacky design not common of you guys! Makes sense that it was a bug with Firefox (I tried it with IE before the correction, and as you specified it worked fine already).

Thanks again 🙂

[stormgoose]

Whilst we’re on this area of design, is there any way of changing the colour of the separating lines between the nav bar options? Or indeed, code to remove them altogether? I’d like to play around with more subtle colouring, and removing them altogether to see what they look like….

Cheers

[Friech]

Hi There,

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

.x-navbar .desktop .x-nav>li:first-child>a {
	border-color: red;
}
.x-navbar .desktop .x-nav>li>a {
	border-color: red;
}

If you need it to remove, you can add this instead.

.x-navbar .desktop .x-nav>li>a,
.x-navbar .desktop .x-nav>li:first-child>a {
	border-width: 0;
}

Hope it helps, Cheers!

[Author]

Posts