Close icon for top bar widget

Interesting question!

You might be able to do something like this:

CSS:

.top-bar {
    transition: transform 500ms ease;
    position: fixed;
    left: 0;
    right: 0;
}

jQuery (added in wp_footer surrounded by <script></script> tags, or in your JS file:

jQuery( document ).ready( function( $ ) {
    $( '.my-close-element' ).on( 'click', function( e ) {
        e.preventDefault();

        $( '.top-bar' ).css( 'transformY', '-100px' );
    } );
} );

This assumes you have an element within your top bar like this:

<a href="#" class="my-close-element">Close me</a>

Ok, that seemed to work for me $( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );. The only thing now is that after adding a z-index: 1; to make the bar visible combined with the position: fixed; property, makes the bar sticky but covers the header. Is there a way to solve that? When this is done, I would also need a solution to the fact that when the elements translates up it needs to move teh page up as well as not to create a gap at the top.

Hmm, I wonder what we can do then.. Usually dismissible notices like this are fixed elements.

You could try this instead:

body {
    transition: transform 500ms ease;
}

jQuery( document ).ready( function( $ ) {
    $( '.my-close-element' ).on( 'click', function( e ) {
        e.preventDefault();

        $( 'body' ).css( 'transformY', '-50px' ); /* height of top bar */
    } );
} );

That's great Tom, I am 99% there, it looks beatiful! That worked for me by the way:

$( 'body' ).css( 'transform', 'translate(0%, -32px)' );

One more thing. Is it possible to have a condition to translate the body class to different values depended on weather the admin bar at the top is present or not? Currently I have to set my top bar the same height as the WordPress admin bar to make it 100% pixel perfect and keep the top header margins in tact, if you know what I mean.

Hi George, you could try an additional rule that targets the body .admin-bar

Hi David. Ok, good idea, I have added the div#wpadminbar class to both css and the javascript function as a separete command to translate up the same amount as the width of the bar but it doesn't seem to be taking that into account. I think it needs a javascript conditional in the form of if div#wpadminbar class is present then translate by this amount else translate by that amount. I will have a look, unless Tom saves me a few hours of searching!

Didn't take me long!

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    z-index: 1;
}

.top-bar p {
    margin-bottom: 0;
}

.top-close-button {
    float: right; 
    clear:right; 
    margin-top: -20px;
    cursor: pointer;
}

body, div#wpadminbar, .top-bar {
    transition: transform 500ms ease;
}

JS

<script>
jQuery( document ).ready( function( $ ) {
    $( '.top-close-button' ).on( 'click', function( e ) {
        e.preventDefault();
        $( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );

        if ($('div#wpadminbar')[0]) {
            $( 'body' ).css( 'transform', 'translate(0, -82px)' );
        } else {
          $( 'body' ).css( 'transform', 'translate(0, -52px)' );
        }

    } );
} );
</script>

Values may vary according to height and contents of top bar. Thank you Tom and David!

Glad to see you got it working. And thanks for sharing!

Hi, I have just created a tutorial in my blog describing how to recreate this type of functionality:
https://bit.ly/2IXCmni

Hope it proves useful, thanks again!

Hi George, thank you for sharing your post, i am sure it will come in useful, lots of fun to be had with that one!