[Resolved] fixing a hook on the top of the page

[Erika]

Dear Support-Team,

I created a hook/element above the header which I would like to be fixed.
It is a div followed by the header and then the navigation which is set to stick when the page is scrolled down.
Without the attribute fixed, the element/hook looks just as it should and disappears when the page is scrolled down and gives place to the sticky-navigation.

I would like to fix this header, so it remains on the page every time and when the page is scrolled, the header disappears, but the sticky-navigation “joins” under this sticky-header 🙂

However, as soon as I set position to fixed for this div, the whole div shrinks to a few pixels with no content visible. It seems that the header goes on top, although the z-index is set to 2000.

What do I miss here? Any idea?

Here is the code for the element:

<table width=”1000″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td class=”contact-phone”><i class=”fas fa-phone”></i> xxx</td>
<td class=”contact-mail”><i class=”fas fa-envelope”></i> xxx</td>
</tr>
</table>

Here is the css:
#contact-div {
width:100%;
height:40px;
background-color:#545454;
color:#ffffff;
text-align:center;
position: fixed;
top: 0;
z-index: 3000;
}

The element is before_header, PHP (not use but enabled), set for the entire site.

Thanks, Erika

[Tom]

Hi there,

To make it so the sticky navigation displays below your fixed top bar, you can do this:

.navigation-stick {
    top: 40px !important;
}

Then, in your #contact-div element, replace position: fixed with position: sticky.

[Erika]

Thank you for the great support, Tom!

[Tom]

You’re welcome! 🙂

[Author]

Posts