1

I'm using Bootstrap 3 to create my wife's website. I have a fixed navigation bar at the top of my page, and want to fix a filter menu to the left hand side. I have this up and it seems to be running and working OK when the screen size is large, medium or even small, however when the -collapse menu on my top navigation kicks in the links on my filter become redundant and dont actually do anything. I'm not too sure what I've done wrong. Any ideas? I've added a jsfiddle here.

http://jsfiddle.net/iameuanmackay/mhk11q52/

Code here:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                 <h1>logo</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button> <a class="navbar-brand active" href="index.html">home</a>

                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="portfolio.html">portfolio</a>
                        </li>
                        <li><a href="blog.html">blog</a>
                        </li>
                        <li><a href="contact.html">contact</a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!-- rheader -->
        </div>
        <!--end col -->
    </div>
    <!-- end row -->
</div>
<!-- end container -->
<!-- Begin page content -->
<div class="container-fluid">
    <div id="portfolio">
        <div class="row">
            <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-sm-offset-2">
                <div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
                    <ul id="filter">
                        <!--This is where the filter links go and and the affix seems to have gone wrong -->
                        <li style="list-style-type: none" class="all"><a href="#">all</a>
                        </li>
                        <li style="list-style-type: none" class="people"><a href="#people">people</a>
                        </li>
                        <li style="list-style-type: none" class="things"><a href="#things">things</a>
                        </li>
                    </ul>
                </div>
            </div>

Any pointers would be much appreciated.

creimers
  • 4,975
  • 4
  • 33
  • 55
Euan Mackay
  • 93
  • 1
  • 1
  • 8
  • Are you trying to customize the navigation so it has a different look and feel from the default BS navbar? Or do you want to use the default design BS navbar? Because You're mixing a few things up in your code and I want to understand where you want to go with this. – timgavin Sep 30 '14 at 00:02
  • Ack, as soon as i posted this, i came across the answer... I needed to set the z-index of the affix to 9999. – Euan Mackay Sep 30 '14 at 00:05
  • hi @Tim The mixup has basically been caused by my hacking. And not very good hacking about in BS. Alas, i ended up finding the answer here: http://stackoverflow.com/questions/20550549/bootstrap-3-affix-navbar-becomes-transparent-and-unclickable-when-scrolling-and?rq=1 Thanks for trying to help out though. As and when i have everything working i'll try re-align the code with something a little more 'standard' – Euan Mackay Sep 30 '14 at 00:06
  • Glad you figured it ou – timgavin Sep 30 '14 at 00:10

0 Answers0