Topic: Wrong navbar render with container inside on mobile view
The following code is getting rendered wrong:
<mdb-navbar dark color="primary">
<mdb-container>
<mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" >Home</mdb-nav-item>
<mdb-nav-item href="#" >Features</mdb-nav-item>
<mdb-nav-item href="#" >Pricing</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-container>
</mdb-navbar>
will become:
<nav class="navbar navbar-dark primary-color navbar-expand-lg">
<button class="navbar-toggler"><span class="navbar-toggler-icon"><!----></span></button>
<div class="container">
<div href="#">
<div class="navbar-brand">Your Logo</div>
</div>
<nav id="navbarSupportedContent" class="navbar-collapse hide-navbar collapse" style="overflow: initial;">
<ul class="navbar-nav mr-auto" >
<li class="nav-item ripple-parent" ><a href="#" class="nav-link navbar-link">Home</a></li>
<li class="nav-item ripple-parent" ><a href="#" class="nav-link navbar-link">Features</a></li>
<li class="nav-item ripple-parent" ><a href="#" class="nav-link navbar-link">Pricing</a></li>
</ul>
</nav>
</div></nav>
..so the navbar-toggler is outside the container, and is not getting rendered properly:
How to fix that?
What exactly is the effect you would like to achieve by wrapping the content in the mdbContainer? The toggler is a separate element attached to the component after its collapse - that's why it's outside the wrapper. I'm attaching the recommended code for our mdbNavbar:
<mdb-navbar expand="large" dark color="stylish">
<mdb-navbar-brand href="#">Navbar</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Link</mdb-nav-item>
<mdb-nav-item class="disabled" href="#">Disabled</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle
tag="a"
navLink
color="stylish"
slot="toggle"
waves-fixed
>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
LeJudge commented 5 years ago
I like to get the effect of getting the menu in the center of the page, like in this demo:https://mdbootstrap.com/previews/docs/latest/html/navigation/intro-transparent.htmland described in the doc's (second example, even if it is wrong/incomplete):https://mdbootstrap.com/docs/vue/navigation/navbar/#containers
No problem on large screens, but on mobile its broken (see screenshot from first post)
The demo is working fine (navbar-toggler INSIDE container, i think its default-bootstrap code), but it is not working with the vue-tags.
Thank you for drawing our attention to this issue - clearly there is a mistake in our documentation. If you want the effect of increasing/decreasing padding I would suggest defining those css properties regarding the container's width. We will try to find better a solution and update our docs as soon as possible.
<mdb-navbar color="warning" light style="padding-right: 10%; padding-left: 10%">
<mdb-navbar-brand href="https://mdbootstrap.com/">Navbar</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle
tag="a"
navLink
color="warning"
slot="toggle"
waves-fixed
>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input
type="text"
class="text-white"
placeholder="Search"
aria-label="Search"
label
navInput
waves
waves-fixed
/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
MartinAmsinck commented 5 years ago
FYI - Just had the exact same issue, with the Intro Sections - Contact Form intro.
https://mdbootstrap.com/docs/vue/sections/intros/#v-2
Magdalena Dembna staff premium commented 5 years ago
Thank you for reporting this issue - we will update examples in our documentation as soon as possible. KInd regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.0
- Device: Mobile
- Browser: Firefox
- OS: Linux
- Provided sample code: No
- Provided link: No