1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: Wrong navbar render with container inside on mobile view

LeJudge free asked 5 years ago

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:

Screenshot

How to fix that?

Magdalena Dembna staff answered 5 years ago

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 free commented 4 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 commented 4 years ago

Thank you for reporting this issue - we will update examples in our documentation as soon as possible. KInd regards, Magdalena

Magdalena Dembna staff answered 5 years ago

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 free 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.
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

Answered

Specification of the issue
  • ForumUser: 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
Tags
navbar rendering
About author
LeJudge
5Support score
1Questions 0Answers 0Snippets