1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Navbar Left align Brand & Right align Menus

devtrix pro asked 7 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 7 years ago

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

Chris Sweeney premium answered 7 years ago

Than ks Marta I have emailed you. Cheers Chris

Marta Wierzbicka staff answered 7 years ago

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

Chris Sweeney premium answered 7 years ago

Hi Marta Thanks for your quick reply. I've put a couple of concept pages at the following urls; www.rotary-ribi.org/concept1.html www.rotary-ribi.org/concept2.html 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 7 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 premium answered 7 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>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/logo.png" class="d-inline-block align-top" alt="clubname"> <span class="navtext"> Club Name</span>
                </a>
                <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>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#best-features">What's On</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#testimonials">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#pricing">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#our-team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-light" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
Halp appreciated Chris

Marta Wierzbicka staff answered 7 years ago

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

devtrix pro answered 7 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: http://stackoverflow.com/questions/41513463/align-navbar-item-to-the-right-in-bootstrap-4-alpha-6
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
devtrix
Pro User 84Support score
23Questions 12Answers 1Snippets