[Resolved] Hide header but still keep the header widget

[yig]

Hi there,

I decided to hide my header from both mobile and desktop to move on with the navigation menu with a logo only.

However when I hide the header, the header widget area also gets hidden. Is there a way for hiding the header but still keeping the header widget?

I used the following code for hiding the header:

/* hide header */
.site-header {
	display:none
}

Thanks very much in advance!

[David]

Hi there,

why not use the Top Bar widget area instead of the Header Widget?

[yig]

Hi David!

Thanks for your response, sorry I missed it, I guess I forgot to turn on the notifications. Meanwhile I found another solution though 🙂

I was using Top Bar for another purpose, above the Navigation Bar. So I wanted to use the Header Widget Area below the Navigation Bar. And I wanted to be able to hide it on mobile or desktop with an additional css.

Then I discovered the abilities of Elements and Hooks 🙂 I was a bit confused about them in the beginning, but apparently they are pretty simple to use and have a lot of customisation options.

I made some hooks by adding <div class="hide-on-desktop">content</div> and added them above content. Problem solved 🙂

Thank you very much!

[David]

Glad to hear that !

[Author]

Posts