How to hide a HTML element based on user role

Question

I have a login top bar I use for general users on the website front end and the admin like to use the wordpress admin bar. I am trying to find a way of hiding the login top bar for admin so they just use the wordpress admin bar (this is only enabled for admin). I would also like to change the CSS of the main container if admin is logged in.

I have been looking for code on Git hub and the web but can't find anything that has worked for me. Does anyone know if this is even possible?

Answer 1

You could use something like this if you have jquery included in your page:

<?php
if ( is_super_admin() ) {
?>
    <script type="text/javascript">
    $( document ).ready(function() {    
        $("#IDofDivHoldingUserTopBar").css("display", "none"); // ID of user top bar
// ............................. OR     
        $(".ClassofDivHoldingUserTopBar").css("display", "none"); // class of user top bar
    });
    </script>
<?php
}
?>

Answer 2

You can try with current_user_can() function.

Step:

if( ! current_user_can('manage_sites')){
   // SHOW THE LOPGIN TOP BAR
}