0

I have a CodePen where I'm working on mock-mobile version of a casino site using Bootstrap. The visibility classes is are in play to make it appear only when on small or extra-small screens.

There's a logo in the navbar that I can't seem to get centered "correctly". I need the the logo to take into context the full width of the bar and not just the full width minus the area of the toggle.

Here my full page CodePen

And here is a casino website that is actually implementing what I speak of, I just can't see how they're doing it. I found a question on here that SEEMED to be close to what I wanted "Located Here". It suggested the wrapping of code with DIVs that correspond to this CSS (but it still didn't work):

.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}
Community
  • 1
  • 1
bmoneruxui
  • 303
  • 7
  • 17

2 Answers2

0

Add width: 100vw or width: 100% to .navbar-header

Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • Hey Tambo. Thanks for this as I did forget about that. – bmoneruxui Jan 08 '15 at 19:08
  • Tambo. Your suggestion definitely helped get it near the center. I've updated my code to reflect changes I was doing locally. It's still not 100% centered and driving me crazy. – bmoneruxui Jan 08 '15 at 22:23
  • @bmoneruxui add `text-align: center;` to `navbar-header` and `.navbar-brand img { width: 197px; margin: 0 auto; padding: 8px 0px; }` – Gildas.Tambo Jan 08 '15 at 22:38
0

Ok I figured it out. Took some time, but I added this...

.navbar-brand img {
  width: 197px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 0px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}

This sorted everything right out. I applied to my CodePen as well.

bmoneruxui
  • 303
  • 7
  • 17