Semantic-UI Sidebar creates pushable class which changes background color and also body height is about 20% of screen.

I am making a website using semantic ui as my framework and everything looks fine except when I click on the sidebar icon for the sidebar menu to pop up, the background image disappears that I've set using

$body {
    background:url('https://lostandtaken.com/wpcontent/uploads/2010/04/141-1560x1170.jpg');
}

and that worked fine. But it disappears as soon as the sidebar menu pops up. I tried looking at the relationship between the sidebar and the body tag but I realized that the body height was way smaller than the size of the screen meaning that 80% of the elements were overflowing. I tried setting the body height to be 100% but that didn't work and also for some reason, chrome sets overflow to visible even if I manually set it to be hidden just to see and it also creates a pushable class. I am included a screenshot to show the height of the body according to the browser: which like 15 or 20% of the full height. and Here is the sidebar Here are the important part of my code

HERE IS A JSFIDDLE IF YOU WOULD LIKE TO SEE THE CODE: https://jsfiddle.net/bmb45L3p/

HTML code

<!--=================================================================================================== --> 
   <body>
   <div class="ui borderless inverted fixed menu trial " style=" z-index: 10; font-family: 'IM Fell Double Pica', serif; font-size: 16px;"> 
   <a class="item icon "> <i class=" wide sidebar big icon" id="mysidebar"></i></a>
   <a class=" item" style="font-family: 'IM Fell Double Pica', serif; font-size: 20px; font-weight: bold;"> MENU </a>  
    <div class= " right menu">
    <a class="item" id="logospot"></a>
   </div> 
  </div>

 

 <div class ="ui sidebar compact inverted labeled icon  vertical  menu" id="theirsidebar" style="z-index: 99;">    
         <a class ="active item">
            <i class="home icon"></i>Home</a>
         <a class ="item">
            <i class="info icon"></i>About SLIDE</a>  
         <a class ="item">
            <i class="user circle outline icon"></i>Meet the Staff</a>
         <a class ="item">
         <i class="users icon"></i>Meet SLIDERS</a> 
         <a class ="item">
         <i class="block layout icon"></i>Committees</a> 
         <a class ="item">
            <i class="announcement icon"></i>Events</a> 
         <a class ="item">
            <i class="image icon" ></i>Pictures</a> 
         <a class ="item">
         <i class="write icon"></i>Apply</a>
         <a class ="item">
        <i class="mail outline icon" ></i>Contact us</a>
        <a class = "item"> 
      <i class="user icon"></i>Member Login
    </a> 
    <a class = "item"> 
        <i class="user circle icon"></i>Staff Login
    </a>
</div>

<div class="ui pusher">
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 

<div class="ui container" style="display: block ; padding-top: 120px;">
<h3 style= "font-family: 'IM Fell Double Pica', serif; font-size: 60px;" class = "ui header center aligned">MEET OUR '17-'18 STAFF</h3>

css

Dec 31 '17 05:12 pape98

Same here.

Feb 14 '18 20:02 nomadme

I'm having the same issue (v2.3.0).

Feb 21 '18 02:02 UnderlineWords

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

May 22 '18 03:05 stale[bot]

Same exact issues as of 15 June 2019.

Jun 15 '19 16:06 PopDaddyGames