0

I know this is an issue many have had, but not being familiar with Less and being new to Bootstrap, I am looking to an all CSS solution for keeping my navbar from collapsing below 768 px:

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left list-inline contact-links">
          <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a></li>
          <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li>
          <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li>
          </ul>

      <ul class="navbar-nav navbar-right list-inline account-and-cart-links">
        <li><a href="my-account.html"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
      </ul>

  </div>

</div>
2
  • I'm guessing by collapsing you mean turning into a mobile-type nav bar (if not can you post fiddle or screenshots)? You need to remove all of the .navbar related items in your CSS media query 768px.
    – evan
    Apr 25, 2014 at 1:15
  • jsfiddle.net/blisstdev/U5h32/1 If you view in full-screen and shrink the screen, you will see the top bar suddenly becomes two rows as suggested here getbootstrap.com/components/#navbar , but I can't figure out how to actually fix it using their solutions
    – blisstdev
    Apr 25, 2014 at 2:04

1 Answer 1

0

Add pull-left and pull-right to the <ul>'s.

JSFiddle

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left pull-left list-inline contact-links">
            <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone">
                </span></a></li>
            <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li>
            <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li>
        </ul>

        <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
            <li><a href="my-account.html">
                <span class="glyphicon glyphicon-user"></span></a></li>
            <li><a href="my-cart.html">
                <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
       </ul>
     </div>
</div>
1
  • you are the best! thank you so very much! I remembered that pull-left/right had been deprecated but it turns out it was only for dropdown menus!
    – blisstdev
    Apr 25, 2014 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.