Menu icon Foundation
Best Practice: navbar rounded corners

Is there a recommended way to achieve rounded corners to the navbar? I've searched but can't find anything definitive...

navbarrounded

Is there a recommended way to achieve rounded corners to the navbar? I've searched but can't find anything definitive...

Wing-Hou Chan over 5 years ago

Hey Paul!

You could apply a border-radius on the nav!

Like this:

nav {
  border-radius: /* Your border-radius */ ;
}

Paul Summers over 5 years ago

Did try that but no joy! I can see a radius when I scale down the browser pixel width but I feel its the opening and closing that seem to need the radius?

Wing-Hou Chan over 5 years ago

Hey Paul!

I just did an experiment on Foundation Forum's topbar just above and was able to apply a radius without any problem.

What do you mean by the "opening" and "closing"?

Paul Summers over 5 years ago

The border radius works fine on the nav and is visible when i remove the list but the corners square back up again when menu items are included, hence my thoughts that the first menu item would require border radius also...

Paul Summers over 5 years ago

The only way i can achieve this is to apply:

.top-bar-section ul.left li:first-child > a {
border-radius: 3px 0 0 3px;
}

but then this breaks the small screen menu layout.