Top front-end admin bar covers top of the page design

I am noticing that the top black admin bar is covering some of the design of the page. For instance I made a fixed/sticky header and as I scroll down half of the header is behind the top admin bar.

Lets see if an image in my Dropbox shows up: https://www.dropbox.com/s/2acl2wf00vsso5k/beans-top-admin-bar.png?dl=0

Hi Paal,

That is caused by the admin bar being a fixed position and the sticky header being set with 0 offset. What I would suggest is to add an offset only when the admin bar is showing to prevent this behaviour. Here is an example snippet to do so:

$offset = ( true === is_admin_bar_showing() ) ? 32 : 0;
beans_add_attribute( 'beans_header', 'data-uk-sticky', "{top:$offset}" );

Happy coding,

Thanks Thierry

It is only for the offline development version I am having this problem. I am using Desktop Server. I am not getting the code to work on the site. It might be that specific site though.

Hi Paal, could you share the code you are using to make the header sticky, it will help to identify where the issue lies?

Thanks,

Hey Thierry

I am using the code posted here: https://community.getbeans.io/discussion/enable-a-sticky-header/

Thanks, so the code snippet I provided above should work fine. If you can share a link to the page, I will gladly to take a look at what the issue could be 😉