How do I add 20px to the top of the header with CSS?

[Ellen Schlechter]

I want to add to the top of the header so the status bar doesn't overlap with it. How should I add 20px to the top with CSS?

[Yurii Orishchuk]

Hi Ellen,

You try following:

1. Add new CSS asset.

2. Use following CSS code for it:

   pre

   [data-role="header"]{
   margin-top: 20px;
   }

   /pre

   Regards.

[Ellen Schlechter]

That code just shifted the header down 20px. That didn't work because the page contents is visible when you scroll. Would it be possible to add a color to it for example #FEFEFE so that it isn't transparent?

[Yurii Orishchuk]

Hi Ellen,

Yes, you can add some absolute bar do it with following way:

1. Open your app start page.

2. Add "Page load" event handler with action "Run javascript".

3. Populate it with following JS code:

   pre

   var barHTML = '';

   var barElement = jQuery(barHTML);

   jQuery("body").append(barElement);

   /pre

   Regards.

[Ellen Schlechter]

That didn't do anything.

[Yurii Orishchuk]

Sorry, code should be:

precode

var barHTML = '<div style="position: fixed; top: 0; left: 0; right: 0; height: 20px; background: #eee; z-index: 1000"><>';

var barElement = jQuery(barHTML);

jQuery("body")&#46;append(barElement);

/code/pre

Regards.

[Ellen Schlechter]

Thanks. I used that along with the first CSS you provided and it worked!

[Ellen Schlechter]

I spoke too soon. With both included, I get two 20px places. With only the JS, it goes on top and overlaps the header. With only the CSS, page contents can be seen. Any other suggestions??

[Yurii Orishchuk]

Hi Ellen,

Your problem is not clear for this time..

Show us some screen shots to clarify it.

Regards.

[Ellen Schlechter]

Here is the picture. Notice that there is something weird with the status bar.