Left navigation menu disappearing when main page content loads, why? - html

Question

This is driving me nuts....as per this page http://kudosoo.com/twofolio.html
there is an issue with the left nav working correctly.The top part of the menu disappears upon loading. I've tried adjusting the css and html in different ways to solve this but nothing has worked to date.
I believe its linked to the either the #container or how the drop dwon menu is showing on the page, seems to be sitting on top of the menu.
Any help is gratefully received.
Main page code is below. Example page is here
<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">
</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">
Home<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Activity<em></em>
<div class="nav-item-submenu active-submenu">
<div class="sidebar-decoration"></div>
Received <em class="unselected-sub-nav"></em>
Awarded <em class="unselected-sub-nav"></em>
Friends <em class="unselected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Select Badge<em class="dropdown-nav"></em>
<div class="nav-item-submenu">
<div class="sidebar-decoration"></div>
Wide item Portfolio <em class="selected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
My Profile<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Close<em class="unselected-nav"></em>
</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">
Facebook<em class="link-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Twitter<em class="link-nav"></em>
</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">
<em class="content-title">Who's getting Kudosoo today?!</em>
LogOut
</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">
</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

So, as I can see it.. really, the navigation shouldn't be showing at all when the page is loaded, correct? As the navigation is shown when the main page content is slid to the right?
z-index is used to order the layers of divs in HTML. The higher the number, the more 'forward' it will be placed on the page (back to front).
Currently, your <div id="content"> has a z-index of 10, whilst your <div id="sidebar"> has a z-index of 2.
This means your Content div will be placed infront of your Sidebar div, causing the top of the sidebar to be hidden.
Changing these values in your CSS file will change the order.
.page-content is on line 9 of your style.css file
.page-sidebar is on line 25 of your style.css file

Answer 2

i think in line 135 you closed the div wrong
remove closing div from line 135 and place in the end of side bar code at line 162
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>

Answer 3

Make the Z-index of your sidebar to 11. Your page content has z-index of 10
<div id="sidebar" style="z-index:11" class="page-sidebar">

Answer 4

I actually resolved this by adjusting <div style="height:350px"></div> to
<div style="height:3350px"></div> worked. The menu now works as expected. Not shown when the page loads, but shown in full when the button is clicked to display it.