1

I am building a site using Bootstrap and was unable to get the navbar to span the full width of the page because Bootstrap's default styling forces padding on each side of the page.

I fixed this problem by adding the following CSS but this created a new problem.

@media (max-width: 767px) {
  body {
    padding-right: 0px;
    padding-left: 0px;
  }

The new problem is that this causes the desktop size styling to be ignored so it only ends up looking right when the browser window is phone sized.

I think the only way around this may be to understand what @media is for and how it works. Or maybe there is a better way to make a full width navbar that doesn't require modifying @media?

I have seen Bootstrap sites with full width navbars but haven't been able to figure out what part of Bootstrap's code was changed to accomplish this. Modifying @media is the only way I could figure out.

Any help would be greatly appreciated.

madth3
  • 7,275
  • 12
  • 50
  • 74
Mentalist
  • 1,530
  • 1
  • 18
  • 32
  • post some code if you can for the nav bar. – Pete D Jun 12 '13 at 06:35
  • Here is the code for the navbar. But the issue lies with the page padding, and how I can't override it.
     – Mentalist Jun 12 '13 at 06:40
  • you can change the first div to
    if you want it to be static and always full width. But this will make it not responsive. However what you did with the media query should work and not effect the desktop styling. Are you sure you didnt change also anything else?
     – Pete D Jun 12 '13 at 06:46
  • Thank you! That fixed the width. It now spans the whole page. But the menu items are now aligned left instead of center, so let me see if I can fix that. – Mentalist Jun 12 '13 at 06:54
  • I'm not sure if there is a more simple way but you can add at the ul classes 2 more classes " span6 and offset2 " and that will move them around in the middle. But again maybe there is a simple built in way in bootstrap to do this – Pete D Jun 12 '13 at 06:59
  • Thanks for the idea. I tried it, but centering using offsets is too approximate - it becomes visibly off center. – Mentalist Jun 12 '13 at 07:10
  • I added a link to another discussion that answers the problem for centering the menu. Check my answer below for the link. – Pete D Jun 12 '13 at 07:15

1 Answers1

0

you can change the first div to 

<div class="navbar navbar-static-top">

if you want it to be static and always full width. But this will make it not responsive. However what you did with the media query should work and not effect the desktop styling.

EDIT for centering the elements check this discussion here it has some great answers

Community
  • 1
  • 1
Pete D
  • 777
  • 5
  • 15
  • Thank you for the suggestion and link. I got the desktop paragraph styling problem resolved. And I got the navbar to span the entire screen by using `body { padding: 0px; }` to get rid of the default 20px padding on the sides of the page. The only problem left is that I want to add padding back only to specific divs but when I make a class like `.padded { padding-right: 10px; padding-left: 10px; }` it doesn't take. Something is overriding it somewhere. But what? – Mentalist Jun 12 '13 at 12:44
  • Edit: Turns out I will NOT be posting my answer below to help anyone else here because StackOverflow thinks they're too good for my answer and have banned me from posting answers because "Stack Exchange web sites are question and answer sites, not help forums". Well, finding answers often requires open discussion and brainstorming. They disrespected my time that I spent writing up a nicely formatted clear explanation of a solution. Since the folks who run this site want to be arrogant I'll post the helpful information elsewhere. Thank you for your help Pete, but this site is awful. – Mentalist Jun 12 '13 at 15:49