Левое навигационное меню исчезает при загрузке содержимого главной страницы, почему?

Question

Это сводит меня с ума .... согласно этой странице http://kudosoo.com/twofolio.html

есть проблема с правильной работой левого навигатора. Верхняя часть меню исчезает при загрузке. Я попытался настроить css и html по-разному, чтобы решить эту проблему, но до сих пор ничего не сработало.

Я считаю, что это связано с # контейнером или с тем, как на странице отображается меню drop dwon, похоже, сидит сверху меню.

Любая помощь с благодарностью принимается.

Код главной страницы ниже. Пример страница здесь

<div id="preloader"> 
    <div id="status"> 
     <p class="center-text"> 
      Loading the content... 
      <em>Loading depends on your connection speed!</em> 
     </p> 
    </div> 
</div> 


<div class="all-elements"> 
    <div id="sidebar" class="page-sidebar"> 
     <div class="page-sidebar-scroll"> 
      <div class="sidebar-controls"> 
       <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="sidebar-face"></a> 
       <a href="https://twitter.com/kudosoo" target="blank" class="sidebar-twit"></a> 
       <a href="#" class="sidebar-close"></a> 
      </div> 


      <div class="sidebar-header"> 
       <img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img"> 
       <h4 class="center-text">kudosoo</h4> 
       <em class="center-text">Get badged today</em> 
      </div> 

      <div class="sidebar-breadcrumb"> 
       <div class="sidebar-decoration"></div> 
       <p>Navigation</p> 
       <div class="sidebar-decoration"></div> 
      </div> 

      <div class="navigation-items"></div> 
      <div class="nav-item"> 
       <a href="http://kudosoo.com/user_home.html" class="home-nav">Home<em class="unselected-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="#" class="features-nav submenu-deploy">Activity<em></em></a> 
       <div class="nav-item-submenu active-submenu"> 
        <div class="sidebar-decoration"></div> 
        <a href="mybadges.html">Received   <em class="unselected-sub-nav"></em></a> 
        <a href="awardedbadges.html">Awarded  <em class="unselected-sub-nav"></em></a> 
        <a href="friends.html">Friends  <em class="unselected-sub-nav"></em></a> 
       </div> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="http://kudosoo.com/selectbadge.html">Select Badge<em class="dropdown-nav"></em></a> 
       <div class="nav-item-submenu"> 
        <div class="sidebar-decoration"></div> 
        <a href="widefolio.html">Wide item Portfolio  <em class="selected-sub-nav"></em></a> 
       </div> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="user_profile.html" class="contact-nav">My Profile<em class="unselected-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a> 

      </div> 
     </div> 



     <div class="sidebar-breadcrumb"> 
      <div class="sidebar-decoration"></div> 
      <p>Let's get social!</p> 
      <div class="sidebar-decoration"></div> 
     </div> 

     <div class="navigation-items"> 
      <div class="nav-item"> 
       <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="facebook-nav">Facebook<em class="link-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="https://twitter.com/kudosoo" target="blank" class="twitter-nav">Twitter<em class="link-nav"></em></a> 
      </div> 
     </div> 

     <div class="sidebar-decoration"></div> 

     <p class="sidebar-copyright center-text">Copyright 2014. 
      <br>All rights reserved.</p> 

    </div> 
</div> 


<div id="content" class="page-content"> 
    <div class="content-controls solid-color fixed-header"> 
     <a href="#" class="deploy-sidebar"></a> 
     <em class="content-title">Who's getting Kudosoo today?!</em> 
     <a href="index.html" id="logout" class="deploy-contact button-icon icon-setting button-orange">LogOut</a> 
    </div> 
    <div class="fixed-header-clear"></div> 

    <!---HTML code not to change ends--> 

    <div class="content"> 


     <div id="container"> 
     </div> 


     <!--Search options to find firends, requests and rejections--> 

     <div id="friendsfilter"> 
      <form id="friendsfilter"> 
       <div class="error" style="display:none"></div> 

       <div class="form-group"> 
        <div class="input-group input-group-hg input-group-rounded"> 
         <span class="input-group-btn"> 
           <button id="find_button" type="button" class="btn"><span class="fui-search"></span> 
         </button> 
         </span> 
         <input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" /> 
        </div> 
       </div> 

       <select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends"> 
        <option value="0">Click to manage friend connections</option> 
        <option value="f_connected">Friends</option> 
        <option value="f_requests">Requests</option> 
        <option value="f_rejected">Declined</option> 
        <option value="f_sent">Sent</option> 
       </select> 

       <div id="FriendsConnected"></div> 
       <div id="FriendsPending"></div> 
       <div id="FriendsRejected"></div> 
       <div id="FriendsSent"></div> 
      </form> 
     </div> 


     <!--Friends profile info and stats--> 

     <div id="container friendsProfile"> 
      <form> 
       <div class="error" style="display:none"></div> 
       <button id="friendsProfile" class="button button-red">Unfriend</button> 
      </form> 
     </div> 



     <!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found--> 

     <div id="container"> 

      <img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image"> 

      <div id="userimgs"></div> 

     </div> 

     <div id="container" class="container no-bottom"> 
      <!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked--> 

      <div id="containerFriends"></div> 
      <div id="containerFriendsPending"></div> 
      <div id="containerFriendsRejected"></div> 
      <div id="containerFriendsRequestSent"></div> 
      <div id="containerFriendsConnected"></div> 
      <div id="containerFriendsProfile"></div> 


     </div> 


     <!--Displays friends uploaded badges after the user clicks on their profile picture--> 

     <div id="container"> 

      <div id="badgeimgs"></div> 

     </div> 

    </div> 
</div> 
</div> 
</div> 



<!--Footer stuff--> 

<div class="container"> 
    <div type="button" id="decline" class="btn btn-danger mrs"></div> 
    <div class="footer-socials"> 
     <a href="#" class="facebook-footer"></a> 
     <a href="#" class="goup-footer"></a> 
     <a href="#" class="twitter-footer"></a> 
    </div> 
    <p class="copyright uppercase center-text no-bottom">Copyright 2014 
     <br>All rights reserved</p> 

</div> 
<div style="height:350px"></div> 
</div> 
</div> 

Answer 1

Я на самом деле решить это путем корректировки <div style="height:350px"></div> к

<div style="height:3350px"></div> работал. Меню теперь работает так, как ожидалось. Не отображается, когда страница загружается, но отображается полностью, когда кнопка нажата для ее отображения.

Answer 2

Сделать Z-индекс боковой панели до 11. Вашего содержания страницы г-индекс 10

<div id="sidebar" style="z-index:11" class="page-sidebar"> 

Answer 3

я думаю, что в строке 135 вы закрыли DIV неправильно

удалить закрытие DIV из линии 135 и место в конце кода боковой панели на линии 162

<div class="nav-item"> 
        <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a> 

       </div> 
      </div> 

Answer 4

Итак, как я могу см. его .. действительно, навигация не должна отображаться вообще, когда страница загружена, правильно? Как навигация отображается, когда содержимое главной страницы сдвинуто вправо?

z-index используется для упорядочения слоев div в HTML. Чем больше число, тем больше «вперед» он будет размещен на странице (назад к фронту).

В настоящее время вашего <div id="content"> имеет Z-индекс 10, в то время как ваш <div id="sidebar"> имеет Z-индекс 2.

Это означает, что ваше содержание DIV будет размещено Infront вашей боковой панели DIV, в результате чего в верхней части боковая панель должна быть скрыта.

Изменение этих значений в вашем файле CSS изменит порядок.

.page-content находится на линии 9 вашего style.css файл .page-sidebar находится на линии 25 вашего файла style.css