This question already has an answer here:
how to convert bootstrap4 navbar to sidebar for mobile?
(1 answer)
Closed 2 years ago.
When my navbar goes to the mobile type with the hamburger icon I want it to show a sidebar rather than the dropdown type that it does by default. Meanwhile I would like to keep it the top style navbar then on larger screens.
I hope that makes sense.
nav.html
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid">
{% load static %}
<a href="{% url 'main:homepage_view' %}"><img class="nav-logo img-fluid"
src="{% static 'img/logos/logo-white.png' %}"></a>
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url "main:homepage_view" %}">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "dealers:dealers_view" %}">DEALERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "main:contact_view" %}">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "news:blog_view" %}">NEWS</a>
</li>
</ul>
</div>
</div>
</nav>
AFAIK that's not directly possible. In other words bootstrap does not provide a way to collapse menus into a sidebars. That said, you want to add an event to the harmbuger icon that opens a custom sidebar you added which shows only on mobile.
Take a look:
https://bootstrapious.com/p/bootstrap-sidebar
https://mdbootstrap.com/docs/jquery/navigation/sidenav/
https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp
Related
I have a template which uses the above version of Bootstrap, complete with matching css and js scripts. The navigation code looks like this:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
<div class="container">
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Brand
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
It works fine with an automatic adding of the 'active' class to whatever menu item is clicked.
I was thinking of customizing the active state of the .nav-item elements and tried to disable the native effect but, despite disabling all the js scripts and all the css scripts it still works ie the active class is still added to the clicked item. How can this be and what is the code that makes it happen?
my navbar is:
<ul class="nav">
<li class="nav-item ">
<a class="nav-link" href="#SubMenu">
<span class="menu-title">Details</span>
</a>
<div class="collapse" id="SubMenu">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="{{ url_for('Details') }}">Upload Details</a></li>
</ul>
</div>
</li>
My code runs on flask on the server side, I want to dynamically add active class on the <li class="nav-item>, when <a class="nav link"> is selected, I tried various solutions provided on SO, but none is working, if someone could help me figure out, whats happening wrong?
Thankyou.
I hope this menu will be there in all in all the pages. so better create a base file.
Just assume you are in Upload Details page {{ url_for('Details') }}.
In that page, extend this base template, and set a active_page variable.
{% extend 'base.html' %}
{% set active_page = 'upload_page' %}
...
In you base.html
<ul class="nav">
<li class="nav-item {{ 'active' if active_page=='upload_page' else ''}}">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am beginner in JavaScript and bootstrap, i have added the navbar but i want to change the navbar titles language (Home,About us,Our Service,Contact us) by clicking the button at the top of navbar. Below is the bootstrap code.
<button type="button" class="btn btn-primary">Spanish</button>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="images/logo.png" width="60" height="55" class="d-inline-block align-top" alt="" loading="lazy">
<button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourservices.html">Our Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
</ul>
<a class="btn btn-outline-primary" id="fire" href="http://eatxact.com/#">Login</a>
</div> </nav>
You can create locale for some language, like 'en' or 'uk' and add it to the url of the website and simply redirect to the correct localizated page by clicking on the button.
But it would reload the page. If you want not to do it, Siddharth S.`s answer is the best choice
I am a beginner with CSS and Bootstrap and am having trouble changing the bootstrap css so that I can center the text in my navbar. I am working on a navbar for a website that turns into the caret symbol when the screen size is reduced.
I've spent well over an hour trying to find which class/attributes I should change but to no avail. I found that when I change ".navbar-collapse" and add "text-align: center", it changes the text to be in the center, but its only when the screen size is small. I do not know how to center it when the screen size is bigger than "navbar-expand-sm".
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<span class="navbar-text">madlee</span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
Work History
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown-target">
<div class="dropdown-divider" href="#"></div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
</ul>
</div>
</nav>
I have been trying to get all the text in the navbar to be in the center of the screen instead of on the left.
You can try adding additional styles in your main navbar
.navbar {
display: flex;
justify-content: center;
}
Open your css file and add this line
ul { margin: auto !important;}
Have you gone through these Bootstrap tutorials? They have a well-shaped and maintained documentation. But if you don't want to go there, lets clear some points here.
Your code is perfectly correct, no errors.
You need a little bit of CSS knowledge, just add three lines of code for this to work. And here it is:
ul {
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<span class="navbar-text">madlee</span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
Work History
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown-target">
<div class="dropdown-divider" href="#"></div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
</ul>
</div>
</nav>
edited
The above code will work but there are various ways to achieve this. I have just stated an obvious one. And yes important will help in overriding any other CSS implied on it.
You might want to go for a CSS quickie here: Link
Happy to help :)
"Bootstrap toggle-collapse expands my navbar menu but won't collapse it."
I've tried messing with the classes and data-target and adding extra script to no avail. The menu expands, then when toggled again it sometimes appears to flicker like it drops down and is immediately open again but most of the time nothing seems to happen. In the Chrome inspector aria=true never becomes false. It appears like it would change but always remains true.
My scripts are located in a separate layout file but they are working. All other functionality works and this even works halfway.
Here's the current code:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<i class="fa fa-lock"></i>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="#navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="{{ path('homepage') }}"><img src="{{ asset('img/logo-blue.png') }}" alt="Podify" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse" role="navigation">
{{ mopa_bootstrap_menu('AppBundle:Builder:mainMenu', { 'automenu': 'navbar' }) }}
<!--
<ul class="nav navbar-nav">
<li role="presentation" class="active">Features <span class="sr-only">(current)</span></li>
<li role="presentation">Pricing <span class="sr-only">(current)</span></li>
<li role="presentation">Contact <span class="sr-only">(current)</span></li>
</ul>
-->
<ul class="nav navbar-right nav-pills hidden-xs">
<li class="active"><i class="fa fa-lock"></i> Login</li>
<li>Join</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
My code doesn't show the nav tag closed for some reason here but i see it when editing my post.
I imagine it's something simple i'm overlooking. Any help will of course be greatly appreciated!
<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
this Jquery enables Toggle functionality.