Docs

[Amy]

I am having a problem with a thick, dark border appearing around the menu items (main pages and subpages)as well as other links on my site. I’ve tried several things to remove this border but to no avail. I believe it has to do with a jQuery handler. My site is http://www.stpaulunitedmethodistmalvern.com. I have attached a couple of screenshots to illustrate the problem. How can I fix this?

[Jade]

Hi Amy,

I tried checking your site but I can’t seem to see the thick borders that you have shown in the screenshot. Were you able to remove it?

[Amy]

No, I was not. Maybe it’s the browser (Firefox)?

[Amy]

It’s not necessarily on hover. It’s on active or focus.

[Jade]

Hi Amy,

Try adding following CSS code under Custom > CSS in the Customizer:

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

Thank you!

[Amy]

Excellent! That seemed to have worked great!

I have noticed another problem since this post: the child pages in the dropdown menu is not showing up directly below the parent page but instead a couple of inches down in the main content. How do I fix this?

[Thai]

Hi There,

Please also add the following CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 62px;
}

Hope it helps 🙂

[Amy]

Perfect! Thank you so much! I truly appreciate your quick response and spot-on help. 🙂

[Nico]

Happy to hear that.

feel free to ask us again.

Thanks.

[Author]

Posts