0

About a year ago, @Andres Ilich provided a beautifully elegant answer to centering the navigation bar in Bootstrap. An excerpt from the posted answer is below:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

And then you can target the .center class like so:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

Since this affected the drop down menu as well, he added this:

.center .dropdown-menu {
    text-align: left;
}

So that the drop down menus would behave normally.

Now I am facing a similar issue. The navigation bar is beautifully centered. Dropdowns work great. But, when you get into tablet and mobile viewports, the mobile menu also gets centered. Simply aligning the text to the left does not solve the issue since each unordered list item needs its own line.

I have been trying to figure out a way where I could simply add a class inside a media query that would undo this, but I haven't been able to find a solution.

Refer to this jsFiddle to see what I am talking about: http://jsfiddle.net/persianturtle/rAYyk/2/

My question: Is there a simple way (<50 lines of code) to undo the above code inside a media query so this navigation menu would be centered desktop view and displayed as normal on tablets and phones?

If this cannot be done with pure CSS, can a step-by-step explanation of how a jQuery solution would work? Since I have h5bp, I already have jQuery 1.9.0 linked in.

Community
  • 1
  • 1
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
  • Also, on certain widths, the "result" text inside the jsFiddle result field gets in the way. Be sure to resize jsFiddle to be able to click. – Raphael Rafatpanah Feb 13 '13 at 19:26

1 Answers1

1

If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file.

This is where the @media queries are located that perform the "responsive design" and stylize the tablet and mobile viewports. 

@media (max-width: 979px) { 
    .center .navbar-inner {
        text-align:left !important;
    }
    .center.navbar .nav > li{
        display:block !important;
    }
}
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
Sites Done Right
  • 642
  • 4
  • 11
  • Unless if you can add a ".hidden-desktop" class to a class, I don't think this would work. – Raphael Rafatpanah Feb 13 '13 at 19:19
  • Inside of _bootstrap-responsive.css_, find the styles for this media query: @media (max-width: 767px)', (_which sets styles for devices whose maximum width is 767 pixels, or "tablet size"..._) In this media query, set `.center .navbar-inner { text-align: left !important; }` This will override the center alignment, but only in cases where the width is "tablet size". – Sites Done Right Feb 13 '13 at 19:37
  • Prove it, the jsFiddle is set up with bootstrap and is ready to go. If you can figure it out, you will definitely get my answer and upvote! – Raphael Rafatpanah Feb 13 '13 at 19:39
  • OK. Here's an update which will just force the extra LI's which were on "line 2" to the left (instead of centered) http://jsfiddle.net/rAYyk/3/ And here's a different update which will force each LI to its own line (and still stick it to the left) http://jsfiddle.net/rAYyk/4/ **NOTE** If you have a huge monitor, the preview pane inside JSFiddle may be over 767px wide, and thus the media query won't run. Resize your window to see the change. – Sites Done Right Feb 13 '13 at 19:51
  • I edited your post with the media query for max width 979 instead of 767 since that solves 100% of the problem. Thank you! – Raphael Rafatpanah Feb 13 '13 at 19:58
  • I will upvote you once your posted gets edited since I can't until then. – Raphael Rafatpanah Feb 13 '13 at 19:58
  • Awesome! My original answer is applicable if you were hosting you own bootstrap.css files. Because then you could make the edit right inside the appropriate query inside the bootstrap-responsive.css file. Thanks for the check. Sorry about the edits; I'm still getting the hang of StackOverflow. I spent too many years "taking" and I want to give back! :-) – Sites Done Right Feb 13 '13 at 20:05
  • 1
    I appreciate that! I have tried giving back as well, but I always, I have to take as well! Also, I got it working on my site with a simple media query override instead of changing bootstrap's CSS in case I have to update in the future! – Raphael Rafatpanah Feb 13 '13 at 20:12
  • I upvoted everything you did as a thank you! I am sorry I underestimated your answer! Hopefully these extra points will make you better heard! – Raphael Rafatpanah Feb 13 '13 at 20:14