Topic: Navbar middle section
MDB 3 Pro
I am using a navbar fixed on top like this
<nav class="navbar double-navbar navbar-fixed-top special-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<!-- SideNav slide-out button -->
<a href="#"><i class="fa fa-bars"></i></a>
<!--/. SideNav slide-out button -->
</div>
<div> To add middle section here PAGE TITLE</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><a><i class="fa fa-sign-in"></i><br><span>Login</span></a></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
I am trying to add a middle section (see in the example) to show page title (centered) with no any luck (using the only MDB3).
Any suggestion?
Alec.
Add comment
Hello,
try this code:
CSS:
.middle {
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
}<nav class="navbar double-navbar navbar-fixed-top special-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<!– SideNav slide-out button –>
<a href="#"><i class="fa fa-bars"></i></a>
<!–/. SideNav slide-out button –>
</div>
<div class="middle"> <p class="white-text">To add middle section here PAGE TITLE</p></div>
<!– Navbar Icons –>
<ul class="list-inline pull-right text-center">
<li><a><i class="fa fa-sign-in"></i><br><span>Login</span></a></li>
</ul>
<!–/. Navbar Icons –>
</div>
</nav>
<!–/.Navbar–>FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No