Fixed div display on top of all other divs and still scroll?

**Hi there,

I have a sticky/fixed menu that sticks to the left of the page.

I have it placed in a left hand column next to another column with content in.

I then have the same underneath, but without the menu in the sidebar.

The menu sticks as the page scrolls down, but it then disappears when the new left hand column starts.

Is there a way I can keep the menu in the first left hand column then stay on top of all other divs as I scroll down the page?

This is the code I have:

 <div class="row ">
		<div class="col-md-3">
		
       
       	<div class="detail-sidebar hidden-sm hidden-xs">
                <div class="scroll-heading menu" style="position: fixed; top: 5px;">
                   <h1>Menu</h1>
         
                   <ul>
					<li><a title="" href="#">Link1</a></li>
                   <li><a title="" href="#">Link2</a></li>
                   <li><a title="" href="#">Link3</a></li>
                   <li><a title="" href="#">Link4</a></li>
				</ul>
                </div>
            </div>

       
       
       
       </div>
        <div class="col-md-9 ">
        content
	 </div>
      
      <!--menu dissapears here -->
      
      <div class="col-md-3">
      sidebar 2
	 </div>
       
      <div class="col-md-9 ">
        content
	 </div>
     
    
   
  
 
	 </div>

Any help would be great, thanks

That is not enough code to work with.

A “working page” that shows us your layout and demonstrates the issue would be very helpful.

“working page”:

  • starts with <!doctype html>
  • includes <head> with appropriate tags and links to CDNs
  • includes <style> section within <head> with relevent CSS
    OR a stylesheet with relevent CSS.
  • includes <body> with HTML.
  • includes JavaScript within <script> tags as needed.
  • ends with </html>

It probably wouldn’t hurt to mention that you are using BootStrap but with the proper CDNs in the <head> of the page, it should be obvious.

Of course, you could also post a link to the working page, if you have one.

Sometimes annotated screen shots are helpful.

The usual “help us help you” stuff.

1 Like

As Ron said we need to see the real problem first hand rather than guessing.

I have put your code inside a bootstrap template so that everything is working.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
  <div class="row ">
    <div class="col-md-3">
      <div class="detail-sidebar hidden-sm hidden-xs">
        <div class="scroll-heading menu" style="position: fixed; top: 5px;background:red;z-index:2;">
          <h1>Menu</h1>
          <ul>
            <li><a title="" href="#">Link1</a></li>
            <li><a title="" href="#">Link2</a></li>
            <li><a title="" href="#">Link3</a></li>
            <li><a title="" href="#">Link4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-9 "> content </div>
    
    <!--menu dissapears here -->
    
    <div class="col-md-3"><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p><p>sidebar 2</p> </div>
    <div class="col-md-9 "> content </div>
  </div>
</div>
</body>
</html>

If you are talking on top as in z-index on top then add the z-index to your inline style.

<div class="scroll-heading menu" style="position: fixed; top: 5px;background:red;z-index:2;">

I’m not sure if that’s what you are asking though as having a menu overlap the content at all times seems a bit strange to me. Usually you would keep content away from the fixed menu.

2 Likes

Thanks it worked. Yes I meant on top as in z-index.

Thanks for your help!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.