Wordpress Admin Bar Covering & Overlapping Fixed Menu Header [closed]

Question

I am having a problem with the Wordpress Admin bar covering and overlapping my fixed menu header. The theme originally did not have a fixed menu header but I edited the CSS to add one. Also, I added a background color change for the header's menu (in case this complicates the fix).

I have tried using numerous fixes found on StackExchange, Wordpress Blogs, Reddit, Ect. But these fixes moves my slider and body content further down the page, while my fixed header is still showing at the very top of the page covered by the Wordpress Admin Bar still.

I have taken screenshots of what happens when I tried using the other fixes found on StackExchange.
https://imgur.com/a/cAI05S5

And I am seeking a solution that does not involve installing "another" plugin because of the "download this plugin to fix your issue and slow down your website at the same time" compromise. The website is not live yet, but I'm building it using a WAMP local server on my PC.

This is my code that I used to make my fixed header

header.header-default {
    position: fixed!important;
    top: 0px!important;
    z-index: 2000!important;
    width: 100%!important;
}

.jumbotron {    
    padding-top: 55px!important;
}

div.page-header {
    padding-top: 115px!important;
    padding-bottom: 25px!important;
}

Answer 1

One solution to your problem is hiding admin bar from front-end. Maybe there is problem in your css too.

To hide admin bar from front-end:

1. To remove the toolbar from your site, go to Users > Your Profile. Scroll down to “Toolbar” and uncheck “Show Toolbar when viewing site.”
2. Add add_filter(‘show_admin_bar’, ‘__return_false’); to functions.php of your theme.

Answer 2

If adding top margin or padding to body.admin-bar doesn't fix the issue and you want to keep admin bar visible, you could try moving the whole admin bar to the bottom of your page. Add CSS below at the end of your stylesheet:

body.admin-bar #wphead {
   padding-top: 0;
}
#wpadminbar {
    top: auto !important;
    bottom: 0;
    position: fixed;
}
#wpadminbar .quicklinks .menupop ul {
    position: absolute;
    bottom: 32px;
    background-color: #23282d;
}
#wpadminbar .quicklinks .menupop ul + ul {
    bottom: 70px;
}
#wpadminbar .quicklinks .menupop ul ul {
    transform: translateY(62px);
    -webkit-transform: translateY(62px);
    -ms-transform: translateY(62px);
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
    bottom: 64px;
    position: absolute;
}
@media screen and (max-width: 782px) {
    #wpadminbar .quicklinks .menupop ul {
        bottom: 46px;
    }

    #wpadminbar .quicklinks .menupop ul + ul,
    #wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
        bottom: 86px;
    }

    #wpadminbar .quicklinks .menupop ul ul {
        transform: translateY(92px);
        -webkit-transform: translateY(92px);
        -ms-transform: translateY(92px);
    }
}

I took CSS from this tutorial and tested it, it works well.