Tim Tim - 6 months ago 14
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
.top-bar
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
top-bar
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

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;.