Change Horizontal menu to vertical with dropdown

Asked

Viewed 293 times

2

Good afternoon, I have this menu in w3school bootstrap. The menu is horizontal and has the vertical dropdown. I intended to place the menu vertically, that is, below Home to have Page1, then Page 2 below Page1. It also intended to place the dropdown horizontally instead of vertically, that is, when you click page1 instead of opening the dropdown underneath, open next to page1. Up to 768px it shows vertically, but from that shows horizontally and I’m not able to change the properties to put the menu vertically. Can someone help me? You got the code.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

</body>
</html>
    </body>
</html>

  • Dude I think it’s a project you’re starting now, but why use Bootstrap 3?? Bootstrap 4 was released in 2017, and Bootstrap 5 is in the process of being released, there is no justification for starting something in BS3 nowadays... I tell you that tb pq here has half of its answer, but I did in BS4 https://answall.com/questions/350199/navbar-vertical and forget BS3 for your sake :D

  • Yeah, I’m really new to Bootstrap. I’m in college and I was about to start learning bootstrap and I wanted to get a little ahead of myself and start seeing how it works, what it is and try some projects. I will see your project to understand how to do things. Thank you very much

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.