Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navbar-expand-md does not work has intended #16

Open
AnotherIdea opened this issue Oct 16, 2019 · 2 comments
Open

Navbar-expand-md does not work has intended #16

AnotherIdea opened this issue Oct 16, 2019 · 2 comments

Comments

@AnotherIdea
Copy link

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [x ] I am running the latest version
  • [x ] I checked the documentation and found no answer
  • [ x] I checked to make sure that this issue has not already been filed
  • [x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When using bootstrap class' navbar-expand-md, navbar should remain expanded until viewpoint is less than 768px

Current Behavior

Navbar break and do not properly display.

Failure Information (for bugs)

Steps to Reproduce

  1. Use this minimal working code
<!doctype html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="argon.min.css">

  </head>

    <body  class="bg-default">
      <nav id="navbar-main" class="navbar navbar-horizontal navbar-transparent navbar-expand-md navbar-light">
    <a class="navbar-brand ml-3 ml-md-1" href="/home">
      <img src="/images/logo.png" alt="Logo">
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="'Toggle navigation'">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div id="navbarSupportedContent" class="navbar-collapse collapse">
      <div class="navbar-collapse-header">
        <div class="row">
          <div class="col-6 collapse-brand">
            <a href="/home" aria-label="Index">
              <img src="/images/logo.png" alt="Logo">
            </a>
          </div>
          <div class="col-6 collapse-close">
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>

      <ul class="navbar-nav ml-auto ">
        <li class="nav-item justify-content-center align-self-center">
          <a class="btn btn-primary" href="/link1">Link 1</a>
        </li>
        <li class="nav-item justify-content-center align-self-center">
          <a class="nav-link" href="/link2">Link 2</a>
        </li>
        <li class="nav-item justify-content-center align-self-center">
          <a class="nav-link" href="/link3">Link 3</a>
        </li>
        <li class="nav-item justify-content-center align-self-center">
          <a class="nav-link" href="/link4">Link 4</a>
        </li>
      </ul>
    </div>
</nav>
</body>
</html>

  1. Set your browser with a viewpoint < 992px

  2. Navbar does not correctly display
@rarestoma
Copy link
Contributor

Hello @AnotherIdea,

Thank you for working with our products and for pointing us this issue. I checked now and I added it to be solved in our next update.

All the best,
Rares

@charlesycchen
Copy link

charlesycchen commented Feb 18, 2024 •
edited
Loading

Hi @rarestoma,

Bootstrap Navbar class "navbar-expand-sm" also does not work on Bootstrap version 5.3.2. There are only class "navbar-expand-lg" and "navbar-expand-xl" working properly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@AnotherIdea @rarestoma @charlesycchen