• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap navbar

Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Nancy O'Shea: bootstrap guru, I am working on another project that requires both a responsive vertical and horizontal navbar, simultaneously.  Is this possible? The only bootsrap component I can see is a horizontal navbar. 

If anyone else knows, I would be glad to hear. 

Views

141

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

In Bootstrap 5, you have a thing called an off canvas component:

https://getbootstrap.com/docs/5.0/components/offcanvas/ 

 

However I assume you want the vertical navbar to be visible at all times? In which case its just a matter of inserting some links into a bootstrap column.........however I have no idea what you're going to do with the vertical navbar on mobile devices, that's where the off-canvas component comes in handy.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Thanks, I will have a look. I wouldn't know how to handle a verticle navbar in mobile view.  I will figure soemthing out. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Bootstrap is a mobile-first framework.  By default, all navigation is vertically stacked on small devices. 

 

For a secondary navigation, use Bootstrap Pills with the .nav-stacked class.

 

image.png

 

<div class="container">
  <h3>Vertical Pills</h3>
  <p>Use the .nav-stacked class to vertically stack pills:</p>
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Thanks very much. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

LATEST

You can use a regular navigation bar and add the flex-column class to the navigation items container as in <div class="navbar-nav flex-column">

 

The following code shows both navigations, horizontal and vertical.

 

 

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>

<body>
    <div class="container-fluid">
        
        <div class="row">
            <div class="col">
                <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar1_collapse">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link active" href="#">Home</a>
                            <a class="nav-item nav-link" href="#">About</a>
                            <a class="nav-item nav-link" href="#">Contact</a>
                        </div>
                    </div>
                </nav>      
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                <nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2_collapse" aria-controls="navbar2_collapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar2_collapse">
                        <div class="navbar-nav flex-column">
                            <a class="nav-item nav-link active" href="#">Home</a>
                            <a class="nav-item nav-link" href="#">About</a>
                            <a class="nav-item nav-link" href="#">Contact</a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

</body>
</html>

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines