Clever Geek Handbook

How do I fix a sidebar that looks like a bootstrap site?

I need to create a sidebar exactly the same as in getbootstrap.com. I followed the instructions on the site and created a sidebar.

But the problem is that it overlaps the content of the footer. when scrolling the sidebar and scrolling the content, when it reaches the footer, the affix is ​​not removed, and yet it overlaps in the footer section.

Can someone help me solve this error.

I am using the following code,

<body data-spy="scroll" data-target="#leftCol">

    <div role="complementary" id="leftCol">
           <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125">
              <li><a href="#feature1">Feature1</a></li>
              <li><a href="#feature1">Feature1</a></li>
              <li><a href="#feature1">Feature1</a></li>
              <li><a href="#feature1">Feature1</a></li>
            </ul>
    </div>
</body>

I am using the following css,

 /* Custom Styles */
 ul.nav-tabs {
width: 275px;
margin-top: 30px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
 }
 ul.nav-tabs li {
margin: 0;
border-top: 1px solid #ddd;
 }
 ul.nav-tabs li:first-child {
border-top: none;
 }
 ul.nav-tabs li a {
margin: 0;
padding: 8px 16px;
border-radius: 0;
 }
 ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
 }
 ul.nav-tabs li:first-child a {
border-radius: 4px 4px 0 0;
 }
 ul.nav-tabs li:last-child a {
border-radius: 0 0 4px 4px;
 }
 ul.nav-tabs.affix {
top: 30px; /* Set the top position of pinned element */

 }

I named the above code by this link.

Thanks in advance!

+3


source to share


1 answer


EDITED:



Also don't forget to load all css and javascript files. Code tested at http://www.tutorialrepublic.com .

0


source






More articles:


All Articles