I tryed centering the .brand
logo with:
.brand { margin-left: auto; margin-right: auto; }
this is my top navbar layout:
but it seems it doesn't works.
I searched on stack before to post this answer and the code i used above, is taken from an answered question.
Any idea how to center .brand ?
NB: i can't use position:absolute and fixed
, and i would like to do this responsively (responsive
)
also i tryed this:
.brand {
margin:0 auto !important;
padding:0 auto !important;
position:absolute !important;
right:0px;
left:0px;
z-index:9999999999 !important;
}
I gave it an arbitrary width, set it to whatever you'd like.
jsFiddle
I just used those in my style.css and it worked for me:
using bootstrap 3
I added three classes to my global.less file to augment the bootstrap navbar.less classes.
This approach works through all the responsive @media rule sizes, but you will need to adjust font-size and menu-collapse points depending on the width of your menu items (this approach positions the navbar-brand absolutely - it "floats" over the other menu items).
style:
usage:
This worked for me, but I'm sure there's a better way to integrate with the float-based approach that bootstrap implements. Open to feedback.