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 :)
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?
I am using the boilerplate _Layout page and only changed it to change the names and locations of the nav bar. I have been using basic bootstrap. I am confused on why the nav bar is not setting the active class to show which page I am currently on.
Here is the header HTML from _Layout.cshtml:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">OmniPark Administration Tool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Organizations" asp-action="Index">Organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Devices" asp-action="Index">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="C2P" asp-controller="Payments" asp-action="Index">C2P Payments</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here is the CSS that it came with, but the rest is the bootstrap css.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
Then I have tried many variations of the javascript (jQuery?) to get the class to be set to active. This is the root of the problem. When I debug this I can set the active class manually on my links and they look good. I try to put breakpoints in, but it hits the top statement and skips over the rest (including the part where it sets the class to active).
<script>
$('.navbar-nav .nav-link').click(function () {
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
The issue here is that we need to set the active class on the nav-item li item instead of clicked nav-link link like:
$('.navbar-nav .nav-link').click(function() {
$('.navbar-nav li.active').removeClass('active');
$(this).closest('li').addClass('active');
})
You can also verify this from the docs:
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
you can see in the demos shown there that active is set on li instead of the nav-link itself
I basically changed to using this solution here because it works and I am able to also add dropdowns into the menu which is perfect for my future plans on this site.
I was stuck on using TagHelpers in my head and it was holding me back. This is a much better solution to my problem.
Add active class to menu item
You are using the wrong CSS selector. .nav-link is inside .nav-item. So use the CSS selector .navbar-nav .nav-item .nav-link in your JavaScript code.
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
The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container"></div>
<li>
<a class="logo" href="#1"></a>
</li>
<li>
<a class="cart" href="#7"></a>
</li>
<button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul>
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have at least a few problems: See the docs for the Navbar.
data-toggle="dropdown" should be data-toggle="collapse"
data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LOGO
<span class="glyphicon glyphicon-shopping-cart"></span>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The reason that your navbar toggle button isn't working is that you've missed 3 things.
You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.
Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/
Try using the # symbol in data-target attribute to refer on an element whose using this ID.
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse element
<div id="navHeaderCollapse" class="collapse navbar-collapse">
Refer to the docs
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
Collapse plugin
You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue.
I used data-toggle cdn in the head section and it worked in my case. For more info check the link.
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.
Check whether you have used all related CDNs.
"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.