Topic: Navbar Left align Brand & Right align Menus

devtrix pro asked 6 years ago

Hi again, I've seen this asked before and I copied the code fixing the pull-xs-right to float-xs-right, but the navbar appears with a small height and no text. So I have a navbar code, just want the Brand to the left & menus to the right. `<nav class="navbar navbar-toggleable-md navbar-dark bg-faded black"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> Brand <div class="collapse navbar-collapse float-right" id="main-navbar"> <ul class="navbar-nav float-xs-right"> <li class="nav-item active"> Home <span class="sr-only">(current)</span> <li class="nav-item"> Features <li class="nav-item"> Pricing <li class="nav-item dropdown btn-group"> Dropdown <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1"> Action Another action Something else here </div> <form class="form-inline waves-effect waves-light"> <input class="form-control" type="text" placeholder="Search"> </form> </div> </nav>' Please respond asap, got to have this done asap. Thanks a bunch in advance. Raj

Marta Wierzbicka staff answered 5 years ago

Hi, Ok, I'll check your email. Best, Marta

Chris Sweeney pro answered 5 years ago

Than ks Marta I have emailed you. Cheers Chris

Marta Wierzbicka staff answered 5 years ago

Hi, please send me files of this demos to and I'll try to help you. Best, Marta

Chris Sweeney pro answered 5 years ago

Hi Marta Thanks for your quick reply. I've put a couple of concept pages at the following urls; Both suffer the same effect when the toggler is in use. Both were built with the pro version I downloaded a couple of days ago Also, I've discovered, if the club name is very long, the navbar height doesn't change to accommodate the text, which 'runs off' to the right. Is there an existing class that I should be using instead of the one I've created (navtext) Cheers Chris

Marta Wierzbicka staff answered 5 years ago

Hi, What effect would you like to get? Here is a short video with a preview of your code (I change only logo and navbar color). It seems that it looks fine. I tested your code on MDB Pro 4.3.1. Do you have the other version of MDB? Best, Marta

Chris Sweeney pro answered 6 years ago

Hi I've just followed these instructions and it works fine - until the collapse is active, then the list items don't appear in the correct place; the first item overlaps the navbar-toggler. How do I get round this?
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar">
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                <a class="navbar-brand" href="#">
                    <img src="img/logo.png" class="d-inline-block align-top" alt="clubname"> <span class="navtext"> Club Name</span>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul class="nav navbar-nav smooth-scroll">
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#examples-of-use">Featured pages</a>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#best-features">What's On</a>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#testimonials">Testimonials</a>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#pricing">Pricing</a>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#our-team">Team</a>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#contact">Contact</a>
Halp appreciated Chris

Marta Wierzbicka staff answered 6 years ago

Hi, OK, great you solved the problem. Best, Marta

devtrix pro answered 6 years ago

Solved! This was a Bootstrap 4 related question and I found the answer as following <div class="collapse navbar-collapse justify-content-end" . Reference:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes