This is my current navbar
I want to have the look of the first with the drop-down feature of the second. How can this be done?
<nav class="bg-light border navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><span class="blue">C</span><span class="red">$</span><span
class="yellow">5</span><span class="green">0</span> <span class="red">Finance</span></a>
<button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
<button>
<div class="collapse navbar-collapse" id="navbar">
{% if session["user_id"] %}
<ul class="navbar-nav me-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/quote">Quote</a></li>
<li class="nav-item"><a class="nav-link" href="/buy">Buy</a></li>
<li class="nav-item"><a class="nav-link" href="/sell">Sell</a></li>
<li class="nav-item"><a class="nav-link" href="/history">History</a></li>
</ul>
<ul class="navbar-nav ms-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
</ul>
{% else %}
<ul class="navbar-nav ms-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
{% endif %}
</div>
</div>
</nav>
Here is code I found to make a drop-down menu:
<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>
Answer
<ul class="nav navbar-nav navbar-right"> {% if session["user_id"] %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu displayed to the logged in<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="/page-1">page-1</a></li>
<li><a href="/page-2">page-2</a></li>
<li role="separator" class="divider"></li> <li><a href="/logout">Log Out</a></li>
</ul>
</li>
{% else %}
<li><a href="/reg-page">reg-page</a></li>
<li><a href="/log-page">log-page</a></li>
{% endif %}
</ul>
or do the opposite. All you have to do is wrap the bootstrap menu code with the session control code.