Inline menu with icons border problem

[philippe_bonneau]

Hi support team. I have a menu here https://dev.cirquedelapointeseche.com

The inline menu is made with icons with a 1px white border. The images are 54px x 58px.

The problem is that the border is wider between the pictures. I cannot find the right setting to have a 1px border everywhere.

[Prasant]

Hello Philippe,

Thanks for writing in!

• Inspect the inline Navigation Element and under Top Links > Border > Link Sides select the unlink Icon.

• Once you click on the unlink icon, you can now adjust the border width for each sides as per your own requirement.

Thanks.

[philippe_bonneau]

Hi @Prasant. Thanks but I cannot fix the problem with that. I need a 1px white border around each icon. I already know that setting.

The border looks wider between the icons. There is no «between» setting.

[nabeel]

Hey @philippe,

You can fix it with the following CSS:

.x-masthead .x-menu-inline > li > .x-anchor {
    border-bottom-width: 0 !important;
}

.x-masthead .x-menu-inline > li:last-of-type > .x-anchor {
    border-bottom-width: 1px !important;
}

Add it in your header’s CSS section or you can add it globally via Theme Options > CSS. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[philippe_bonneau]

Fixed. Tank you @Nabeel!

[nabeel]

Glad we could help.

Cheers!