Keeping space after top gets fixed

Question

I have created a function where menu gets fixed when I scroll down.

When that happens, it takes a lot of space with it, as you can see in my demo fiddle all the text goes behind the fixed bar instead.

Is there a way to keep a little bit more space between .top which gets fixed and .content?

EDIT: Thank you all for your answers. I choose Marcos' one because he was first, but I know the other ones work as well.

Answer 1

You must to play with the padding-top of the content when the top is fixed. So the whole solution is:

.top.fixed + .content {
    padding-top: 155px;
}

Your edited fiddle:

https://jsfiddle.net/h65x3hyb/2/