1 reply [Last post]
scape
Offline
newbie
Last seen: 1 year 12 weeks ago
Timezone: GMT+2
Joined: 2017-09-21
Posts: 1
Points: 2

Good afternoon,

I wanted to make the top header of a template that I'm making stay fixed. I have no problem doing that since I used it.

.header {
position: fixed;
width: 100%;
top: 0px;
}

The problem is that the content below is now under the header. Then I use

.container {
margin-top: 20px;
}

The problem is that in responsive you can see blank margins between the header and the container. The container is an image with a title. A hero.

What can I do to make that container "stick" to the header on all devices? Let's say you can take that margin automatically without any spaces.

pavithraramesh
pavithraramesh's picture
Offline
newbie
Chennai
Last seen: 43 weeks 4 days ago
Chennai
Timezone: GMT+5.5
Joined: 2018-01-15
Posts: 5
Points: 5

First give a max-height value

First give a max-height value to the sticky menu foe each layout (mobile, tab and large screen). Then apply the margin top value. I hope this helps.
If not please paste the css and HTML here.
Regards
Pavithra,
Spidergems Softlabz - Chennai
https://spidergems.com