Javascript – Adding a top fixed bar and push all the other elements down

I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.

I am creating a plugin & so I cannot modify the website’s code, but can override styles.

Here is my CSS:

.bar-render-top
{
    top:0px;
    margin-top: 0px;
    position: fixed;
    z-index: 999999;
    width:100% !important;
}

I can see the bar but the others are hidden under it. What I would like for them is to ‘move down’. I could add custom css and find the elements’ css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.

Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.

Is this possible? Any help would be highly appreciated.
Thank much.

body {
    background-color: white;
    margin: 0;
    padding: 0;
    padding-top: 90px;
}

.fixed-bar {
    width: 100%;
    position: fixed;
    top: 0;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.bar-1 {
    background-color: gold;
}

.bar-2 {
    background-color: pink;
    margin-top: 40px;
}

.my-bar {
    background-color: blue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
}
<div class="fixed-bar bar-1">
    fixed bar one
</div>
<div class="fixed-bar bar-2">
    fixed bar two
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
    nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
    a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
    eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
    lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
    this has to be on the top of any generic page
</div>

11 thoughts on “Javascript – Adding a top fixed bar and push all the other elements down”

Leave a Comment