Docs

[CogniSens]

Hi,

1. I have boxes around my mobile menu items, it wasn’t an issue until I added a custom button (#btn) but the CSS padding I used to center the button screwed up the mobile menu padding and it looks strange.

2. More boxes around links when they’re clicked. I looked through the forum and found some CSS you recommend to remove the focus for .btn and .button and I did put it into customizer but it didn’t work. As you can see on the site the square boxes on focus are still visible and quite annoying!

Can you suggest a fix?

Thx

I would like to keep web URL private so I will include it in comment below.

[CogniSens]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

1] To remove the boxes in the mobile menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav li>a {
    border: none;
}

2] To resolve this, please use this code instead:

.x-navbar .desktop .x-nav > li > a:focus {
  outline: none !important;
}

Hope this helps. Please let us know how it goes.

[CogniSens]

Thank you. The first worked perfectly.

The second has some outstanding issues:

The boxes are now gone from the header menus but only on large screen displays. If I change my viewport to the point where the menu goes to mobile and click the red button I get the square box back.

I’ve also noticed that the boxes are still there on regular buttons throughout the site (mobile & desktop views). There’s no X buttons on the homepage but I’ll provide a link in a private reply below where a button can be found.

[CogniSens]

This reply has been marked as private.

[Jade]

Hi there,

Please try this code:

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

Hope this helps.

[CogniSens]

That worked, thanks!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts