Tim Tim - 1 year ago 51
CSS Question

Space between top and sub navigation

I created a navigation with a subnavigation, see JSFiddle with subnavigation. I have the issue that between the top navigation with yellow background and the subnavigation with red-colored background I want to have a distance of

1px solid white
to separate both areas. At the moment this CSS definition is used

html, body {
background-color: green;

I tried to put another div around
<nav class="top-bar" data-topbar>
and set the
background-color: white;
but without success.

The goal is to have always a 1px solid line below the
area. So also when there is no subnavigation displayed, see JSFiddle without subnavigation, there should be this separator. I tried it to achieve it there with

.top-bar {
background: yellow;
border-bottom: 10px solid white; /*10px only to see that the border is inside the box*/

but the border is not outside the yellow
box, it is inside, which I do not want to have. Also it would be great to have a combined so that the 1px white space between top and sb navigation is always there.

Answer Source

Working demo

Your border solution was almost correct, just change the box-sizing property so the border isn't placed inside the div:

.top-bar {
    background: yellow; border-bottom: 10px solid white;
    box-sizing: content-box;

This is the default value but you included Foundation that override this value with box-sizing: border-box;.