Hi,

new here, havent found answer to this in the forum, but if there is one feel free to redirect me there 😉

Adding a Sticky Bar to my own page that already have a sticky header: https://www.tata.com.uy/

• Expected behaviour:
  
  The node that unbounce inserts is adding a styles tag that moves my whole page down 100px.
  
  Like this:

<div class="ub-emb-bar ...">

  <style>

    html body {margin-top: 100px !important; }  

  </style>

Whenever the user closes the StickyBar, the styles tag is deleted together with the StickyBar div and the whole page is moving up to its default place.

• 
  

  What I get:
  
  The styles tag is moving everything EXCEPT my own sticky header. So it is left behind the Sticky Bar that overlaps it. That’s beacuse <header> has {position:fixed}

  
  


• 
  

  What I need:
  
  is to add some styles at the same level that moves also my header. Like this

  
  

<div class="ub-emb-bar ...">

  <style>

    html body { margin-top: 100px !important; }  

  </style>

  <style>

    header { margin-top: 100px !important; }

  </style>

The only way I find to add some styling is INSIDE the iframe, and this would never apply to the parent page header.

I cannot add these changes to my own styling because it should only apply whenever the StickyBar is visible.

• only quick and dirty solution I’ve found:
  
  Adding a new styles tag to the StickBar element through js from Google TagManager
  
  It is working correctly, but it feels as a very very nasty hack

So finally:

• Question:
  
  Is there any way to add this styling outside the iframe (but inside the sticky-bar element)?

thanks for reading through all of this!

best

/javier