As I write in the title, I tried to pass from Bootstrap 3 to 4 and after my update, my navbar was broken :
I did nothing wrong and i really can't understand why the inline-block is not working anymore. I tried every thing I found on stackOverflow about this subject and nothing happenned..
Here is my HTML code :
<nav class="navbar navbar-inverse" role="navigation">
<div class="center-block text-center">
<button class="collapse-btn" (click)="toggleMenu()">
<i *ngIf="!isCollapsed()" class="fa fa-chevron-up" aria-hidden="true"></i>
<i *ngIf="isCollapsed()" class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="/home">Progression</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activité pédagogique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Evalutation</a></li>
<li class="nav-item"><a class="nav-link" href="#">Synthèse</a></li>
<li class="nav-item"><a class="nav-link" href="#">Certification</a></li>
</ul>
</div>
</nav>
Thanks for your help.
I found it, it seems that i needed to change property display for navbar-nav from inline-block to flex.
.navbar-nav {
display: flex;
}
Related
I need a help. I used the code from Bootstrap example but it didn't work.
I put data target on Javascript, and i also put data-target on body.
The code is full copy from bootstrap-5 scrollspy, but i don't completely understand how to use it. Thank you for your help.
$('body').scrollspy({ target: '#navbar-example2' });
<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">My Project</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<section id="scrollspyHeading1">
</section>
<section id="scrollspyHeading2">
</section>
<section id="scrollspyHeading3">
</section>
<section id="scrollspyHeading4">
</section>
</div>
</body>
As explained in the Bootstrap 5 docs..
"Scrollable containers and keyboard access If you’re making a
scrollable container (other than the ), be sure to have a height
set and overflow-y: scroll;..."
For example,
.scrollspy-example {
position: relative;
height: 300px;
overflow: auto;
}
Demo
I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)
I would prefer that all my menu items remain visible at all times, and simply switch from a centered row formation into a centered column when the screen size is too small.
<div style="position: sticky; top: 0px;">
<!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9">
<span class="navbar-toggler-icon"></span>
</button> this is the fricking collapse button -->
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ffff</a>
</li>
</ul>
</div>
</div>
You can use the regular bootsrap class used to build your layout and drop the collapsing navbar classes: see https://getbootstrap.com/docs/4.0/utilities/flex/
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
example with :flex-md-row class (play snippet in fullpage and resize windows to see it toggling row/column. You can try also flex-lg-row if you think it turns into column too late.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar " id="navbar10">
<ul class="navbar-nav nav-fill w-100 flex-md-row">
<li class="nav-item">
<a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ffff</a>
</li>
</ul>
</div>
</div>
Using CSS media queries, you can set specific break-points to change your elements. In this example, if the window is less than 480px then we can adjust the width to 100%.
(To see it in action, click run > full page > then resize window)
.navTitle {
width: 20%;
float: left;
background-color: lightGrey;
outline: 1px solid black;
}
#media screen and (max-width: 480px) {
.navTitle {
width: 100%;
}
}
<div class="navTitle">
<p>Section 1</p>
</div>
<div class="navTitle">
<p>Section 2</p>
</div>
<div class="navTitle">
<p>Section 3</p>
</div>
<div class="navTitle">
<p>Section 4</p>
</div>
<div class="navTitle">
<p>Section 5</p>
</div>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 1 year ago.
I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
Here is the HTML for the navbar of my website:
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
And here is the CSS:
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
Bootstrap 5 (update 2021)
The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed...
float-right --> float-end
float-left --> float-start
ml-* --> ms-*
pl-* --> ps-*
mr-* --> me-*
pr-* --> pe-*
BUT, remember floats don't work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto (margin-left: auto) or justify-content-end.
See this question for details
Bootstrap 4
The original answer no longer works in Bootstrap 4, and it's not good practice to use Bootstrap's .row in the navbar component. The .row should only be used for grid columns.
Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto. This can be used to push the nav to the right...
https://www.codeply.com/go/ZAGhCX5lpq
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Or the flexbox utils like justify-content-between can be used on the container inside the navbar...
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container justify-content-between">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).
You can use .justify-content-between on the parent .row to move the flex children to the far edges of the row.
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row justify-content-between">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0
I just added this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
And a extra </div>
I am creating a single page website using Angular 2 and Bootstrap 4.
I created a navbar component that is always on top of the page and I am using page anchor navigation (#id). Please note that I haven't created a routing module (so far it hasn't been necessary to do this).
The navbar code is below:
<nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.html">Garatéa</a>
</div>
<div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home">Início</a></li>
<li class="nav-item"><a class="nav-link" href="#about">Sobre</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Quem Somos</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
</ul>
</div>
</div>
</nav>
Each link corresponds to a section of the single page website, for example, the home component template is:
<div id="home" class="text-center home-background">
<div class="overlay">
<div class="content">
<h1>Bem vindo à <strong><span class="title-text">Garatéa</span></strong></h1>
<p class="lead">Somos uma inciativa que <strong>aumenta a taxa de sobrevivência</strong> em emergências médicas.</p>
</div>
</div>
</div>
My question is: how can I highlight the link in the navbar that corresponds to the section of the website that I am currently browsing? For example, if I am looking at the team about section, I expect to have an active CSS class on the navbar: <li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>.
You can use the srcElement on click of that <a> tag as below
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
Method will be as
clickedLink(e){
let element = e.srcElement;
console.log(e)
for(let i =0; i <element.parentElement.children.length ; i++){
if(element.parentElement.children[i].classList.contains('active')){
element.parentElement.children[i].classList.remove('active')
}
}
element.classList.add('active');
}
LIVE DEMO