Menu Border Radius

[NiallD1991]

Hi Guys,

Just wondering if you could tell me how to make the outer border of this menu element 5px without changing the border radius of the menu items themselves.

Thanks

[friech]

Hi

Thank you for writing in, border-radius and border-width are two different CSS property, so it should not be a problem if you adjust one or the other, to adjust the border-width please add this to Theme Options > CSS

.x-sidebar .widget ul,
.x-sidebar .widget ol {
	border-width: 5px;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[NiallD1991]

Sorry I’m not sure I was clear.

I just want to change the border radius of the 4 main corners corners without the radius of every item changing.

I haven’t built it with a sidebar either because I didn’t want a container.

It’s just a menu element in a container

[friech]

Hi Niall,

Sorry about that, I thought you want to adjust the border-width without affecting the border-radius, and I was looking at the about page where the menu is in the sidebar.

Ok to resolve the issue, please add this to your Navigation Inline’s Element CSS area

• 

$el.x-menu.x-menu-inline {
  border-radius: 5px;
  border-width:2px;
  border-style:solid;
  border-color: rgba(209,209,209,0.63);
}
$el.x-menu > li:last-of-type > .x-anchor {
  border-width:0;
}

Now, because this will give a border around the entire menu, you need to only apply a bottom border on the top links.

• 

Remember only bottom border, no top, right, and left border.

Hope it helps,
Cheers!