Monday, 4 April 2016

Custom navbar collapse in Bootstrap not working. Any tips to get it to work?

I'm coding my website using Bootstrap as the framework and I'm trying to get the navbar to collapse without turning into the dropdown. I floated three elements of the navigation to the left, and four to the right. I got rid of the dropdown and instead want the left navigation to be central below 768px width and the right navigation to be right below it and central.

http://ift.tt/202fKA8

The top is before the collapse, and the bottom is after. I've tried media queries to get rid of the floats below 768px with and display as inline-block but it doesn't do much.

This is the html for my header:

<!-- Navigation -->

<nav class="navbar navbar-inverse navbar-fixed-top" id="navbar-custom" role="navigation"> <div class="container"> <!-- Collect the nav links, forms, and other content for toggling --> <div> <ul class="nav navbar-nav"> <li> <a href="">about</a> </li> <li id="work-bold"> <a href="/Users/alocascio/Desktop/http://ift.tt/236WAOS; </li> <li> <a href="#">contact</a> </li> </ul> <ul class="social"> <li class="social-link"><a href="http://ift.tt/202fHVe class="fa fa-vimeo"></i></a></li> <li class="social-link"><a href="http://ift.tt/236WAOW class="fa fa-linkedin"></i></a></li> <li class="social-link"><a href="https://www.youtube.com/channel/UCMeeepg1ZX7Ie6495Ct2klw"><i class="fa fa-youtube-play"></i> </a></li> <li class="social-link"><a href="https://twitter.com/aidan_locascio"><i class="fa fa-twitter"></i></a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> 

Sorry if this information isn't enough for anyone to help. If there's any other code that you need to get a better idea of the problem let me know. It's probably all very sloppy as I'm a bit new at this. Thanks to anyone who can help!



Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 05, 2016 at 04:38AM by festeziooo http://ift.tt/1RVglk6

No comments:

Post a Comment