Navbar Left align Brand &#38;amp; Right align Menus

Topic: Navbar Left align Brand & Right align Menus

devtrix pro asked 8 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

Add comment

Marta Wierzbicka free answered 8 years ago

0 0 Best answer

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

Add comment

Chris Sweeney premium answered 8 years ago

0 0 Best answer

Than ks Marta I have emailed you. Cheers Chris

Add comment

Marta Wierzbicka free answered 8 years ago

0 0 Best answer

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

Add comment

Chris Sweeney premium answered 8 years ago

0 0 Best answer

Hi MartaThanks for your quick reply.I've put a couple of concept pages at the following urls;www.rotary-ribi.org/concept1.htmlwww.rotary-ribi.org/concept2.htmlBoth suffer the same effect when the toggler is in use. Both were built with the pro version I downloaded a couple of days agoAlso, 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)CheersChris

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka free answered 8 years ago

0 0 Best answer

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

Please insert min. 20 characters.

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

Add comment

Chris Sweeney premium answered 8 years ago

0 0 Best answer

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?

<pre><code><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></code></pre>

Halp appreciated

Chris

HiI'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? Club Name Featured pages What's On Testimonials Pricing Team Contact Halp appreciatedChris

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka free answered 8 years ago

0 1 Best answer

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

Add comment

devtrix pro answered 8 years ago

1 0 Best answer

Solved! This was a Bootstrap 4 related question and I found the answer as following

http://stackoverflow.com/questions/41513463/align-navbar-item-to-the-right-in-bootstrap-4-alpha-6

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

devtrix

Pro User 84Support score
23Questions 12Answers 1Snippets