CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-4
nameless
nameless

Reputation: 1521

Keep logo/header always on top of page

so I'm trying to keep a logo/my header on top of the page.

I already tried things like position: fixed; z-index: 9999; top: 0; left: 0;, respectively left: 40%; or something like that in order to keep my logo in the middle of the page.

What I got is something simple like that:

<div style="text-align:center;">
     <a href="/"><img src="/img/logo.png" style="max-height:100px;"/></a><br/>
</div>

and then I just include it on another page, where I wanna use it

<?php include 'header.php'; ?>

So as mentioned, I tried changing 

<div style="text-align:center;">

to

<div style="text-align:center; position: fixed; z-index: 9999; top: 0; left: 40%;">

But: whats happening here is, that the header is above the rest of the top of the page, so the first x pixels aren't visible, because the header is on top of it.

So what I would actually need, is to have the header on top of the page first (like letting the rest of the page be underneath the header first) and when scrolling, then the header has to become fixed....

How can I achieve this? I hope you get what I mean....PS: I'm using Bootstrap as well, if this helps achieving this.

Upvotes: 0

Views: 122

Answers (1)

Josh
Josh

Reputation: 161

When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.

This is a great feature as now you can position those elements anywhere without worring about the rest of the page.

So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.

For example, if you had the following:

    <div class="header"></div>
   <div class="content"></div>

Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.

.header{
   position:fixed;
   top:0;
   height:50px;
 }


.content{
  padding-top:50px;
 }

I suggest not using inline styles and keep them formatted

Upvotes: 1

Related Questions