LCallaghan84 free asked 6 years ago

the navbar brand is in the collapsible section of the menu? why? why is the site brand name in the collapsible section? moving it outside of the collapsible tag causes an issue. Here is the full code
        <nav class="navbar navbar-dark primary-color-dark">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
                <i class="fa fa-bars"></i>

            <div class="container">
	        <!--Navbar Brand-->
                <a class="navbar-brand" href="" target="_blank">MDB</a>
                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs left" id="collapseEx">
                    <ul class="nav navbar-nav" style="display:block;">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                <!--/.Collapse content-->


and here's how it looks when the menu button is toggled but its all messed up, the brand and nav links are jumbled together and here is it supposed to look I think this issue needs to be resolved.

@jittu92, check my previous post

jittu92 free answered 6 years ago

how to solve this problem?

Hi, It's a problem with Bootstrap 4. Bootstrap 4 is totally different than Bootstrap 3. Navbar from BS4 still needs some improvement. Issue #17250 is still open. There's also a trick that you can use to fix your navbar

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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No