All geek questions in one place

Boot text Navbar Center

I recently applied a bootable navigation bar on my website. However, I have a problem with her when she is in full form. The text is aligned to the left of the navigation bar and, despite the many CSS settings and browsing, none of the changes I tried were successful at all. I am trying to change the navbar so that the text / links inside it are centralized.

<div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div><!-- end navbar-header --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a> <li><a href="#home">Days Out</a></li> <li><a href="#home">Ghosts</a></li> <li><a href="#home">Beasts</a></li> <li><a href="#home">History</a></li> <li><a href="#home">About Us</a></li> <li><a href="#home">Gifts</a></li> <li><a href="#home">Blog</a></li> <li><a href="#home">Contact Us</a></li> </ul> </div><!-- end collapse --> </div>
+6
source share
2 answers

You just need to change the float behavior in the navigation bar, try adding these styles:

 .navbar-collapse { text-align:center; } .navbar-nav { display:inline-block; float:none; }

Bootplydemo

+7
source

Use multimedia queries. This is the heart and soul of Bootstrap.

Since the default breakpoint BS3 for minimizing the navigation system is 767 pixels. Why not determine how you want it to behave above and below this point.

One possible solution as such would be ...

 @media (min-width:768px) { .navbar-collapse { text-align:center; } } @media (max-width:767px) { .navbar-collapse { text-align:left; } }
0
source

Source: https://habr.com/ru/post/981548/

More articles:


All Articles