Fullscreen Header

[ThomasLie]

Hello, i have tried to make a full screen bar.
You can see a demo here: https://www.katharina-liensberger.at/startseiteN/

It works fine, if i write in the dimensions height field the code: calc(100vh).
Also it works fine if i write in CSS the code:

$el.x-bar {
min-height: 100vH !important;
}

But when i am logged in as an administrator, the wpadminbar is visible. Now the height of the calculatet fullscreenbar is to heigh and should be reduced with the heigh of the wpadminbar.

How can i do this ?

[friech]

Hi Thomas,

Thank you for writing in, you can add another line of that same element CSS to your bar that will only trigger if you’re logged in.

body.admin-bar $el.x-bar {
	min-height: calc(100vh - 32px) !important;
}

The class admin-bar will only present if the viewer is login and the 32px there is the height of the admin bar that needs to be offset.

Do not remove your CSS, just add mine.

Hope it helps,
Cheers!

[ThomasLie]

Hi Friech,

thank you for the solution. It works fine if the adminbar ist 32px high. (in Desktop Mode) - if i trie with a mobil phone, the adminbar is higher than 32px … for me this is not a problem but it would be nice to have a solution that works in both worlds.

[mldarshana]

Hi Thomas,

It could be technically possible but we only provide a guideline for certain customizations because customizations are fall beyond our scope of the support.

I would suggest you to contact a developer or a service, if you want to develop a fully fledged solution for each cases.

Thanks for understanding!