Align navbar in div

Question

Please have a look at this one : http://83.212.101.132/betdk/home/two

When the user scrolls, the navbar goes to the top (using the affix plugin).
However, it takes up the whole row (with "Home" going to the left).

What should I do in order for it to :

retain the full-width blue-ish background
the contents remain centered

This is the affix-related CSS :

        .affix {
            position: fixed;

            top: 0;
            width: 100%;
            left:0;
            z-index:10;
            box-shadow: 0 0 30px black;
           -webkit-border-radius: 0 !important;
           -moz-border-radius: 0 !important;
            border-radius: 0 !important;

        }

        .affix .subcon {
            /* The wrapper around the navbar contents */
        }

Any ideas?

UPDATE

Unykvis' answer does work.

With one addition (to avoid messing up the navbar contents in its original form)

.navbar .container {
    padding-left:0px;padding-right:47px
}
            .navbar.affix .container {
padding-left:15px;padding-right:15px;
            }

Ignacio Correia · Accepted Answer · 2014-07-01 11:31:36Z

1

Just add a .container div around the Menu:

<div class="navbar-collapse collapse" id="navbar-main" style="padding-left:0; ">
  <div class="container">
     <ul class="nav navbar-nav">

This is what you want, correct?

So do this:

Solved

EDIT

To fix the aliment I would do:

<div id="nav-fixed" class="container">

And change via jQuery from "container-fluid" to "container", when it is normal, it has to fluid, when it is affix it has to be container.

edited Jul 1, 2014 at 11:31

answered Jul 1, 2014 at 11:10

Ignacio Correia

3,6988 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dr.Kameleon Over a year ago

I've tried this one. And it does work for the affix. However it messes up the navbar when it is in place (NOT affixed). Any suggestions regarding this one?

Ignacio Correia Over a year ago

I tried it in your site via console it worked. I will add an image. You need to add BOTH UL's not only one.

Dr.Kameleon Over a year ago

I didn't say it didn't work. I'm saying it messes the navbar in its original form (look at the right most element. it goes beyond the border...)

Dr.Kameleon Over a year ago

You mean to include both <ul>s inside the .container? If that's what you mean, that's exactly what I did...

Dr.Kameleon Over a year ago

Have a look at this one, please : s1.postimg.org/drknvrjzz/… - "WrapBootstrap" is now beyond bounds. As fot the affix, yes that's exactly what I need.

|

Anthony JEAMME · Accepted Answer · 2014-07-01 11:30:20Z

0

These following properties allow to center a fixed element :

width:1000px;
margin-left:-500px;
left:50%;

Example

edited Jul 1, 2014 at 11:30

answered Jul 1, 2014 at 11:24

Anthony JEAMME

3841 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Align navbar in div

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related