Header covers other header under admin-bar

  • Hi there:)

    I have created a sticky header that includes 2 headers: header-1st-row and header-2nd row. They work fine in the live view without the admin-bar. But, when I’m logged in, header-2nd row cover, the first header. I read somewhere that it could be because of the admin bar. Is there a way to fix this?

    I’m adding the code, in case you need it:

    /*sticky header*/
@media only screen and (min-width: 1025px) {
    
.header-layout2 .headroom--not-top .header-2nd-row {
display: block;
}
	
	.header-2nd-row {
		margin-top:20px;
		border-top:1px solid #dadada;
		border-bottom:1px solid #dadada;
		}
}


	/*sticky header always on the top */
.headroom--not-top.headroom--unpinned {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

    Thank you!

    • This topic was modified 1 year, 7 months ago by saranapoli.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    The admin bar is injected immediately after the body tag, before the first visible HTML element. This element is typically an overall div container for everything else. If your headers are nested within this overall container, everything should work fine if it’s all relative to this container since the admin bar pushes down the entire overall container and everything within.

    If you have various visible page elements who are all immediate children of the body element, at the same level as the admin bar, you could run into difficulty. The solution is to not do that, have everything within one overall container. Only this overall container should be the immediate child of the body element.

    Thread Starter saranapoli

    (@saranapoli)

    Hi:)

    thank you so much for your kind reply:) The problem was the cache. I didn’t clean the cache and old css was interfering with the new one.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header covers other header under admin-bar’ is closed to new replies.