Menu
I am using Bootstrap 3. I would like a navbar with only the brand in it. No other links or anything else. And I want the brand to be in the center. How can I accomplish this? The following css doesn't work:
.navbar-brand { text-align: center; } 
645
To set navbar brand center you need to add . navbar-brand-center class in navbar <nav> tag.
If you want this as a fixed-footer, just add navbar-fixed-bottom class to the <nav class="navbar navbar-default" role="navigation"> element. @Ruben Are you using Respond. js ? it is required for media queries in IE8 and IE9 See the Bootstrap Browser Support Docs for more info on this.
So, in order to resolve this problem, we have assigned the display property of the image tag to “block” and then assign proper width and height to it. Assign the margin to “auto”. You will see that the logo image is now centered in the navigation bar.
Move the brand above the navbar-header and give it the class navbar-right. This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.
css:
.navbar-header { float: left; padding: 15px; text-align: center; width: 100%; } .navbar-brand {float:none;} html:
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> </nav> Use these classes: navbar-brand mx-auto
All other solutions overcomplicate the matter.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
