I have been trying to make my navbar transparent but so far nothing has worked for me. Can someone teach me how to do it? I assume it has something to do with the space that it is taking up in regards to the body content, but I am not sure what can be done as I have already tried reversing the div tags to be outside of the body.
This is my desired result :
Fiddle : https://jsfiddle.net/zr1qh780/
My HTML :
<body>
<div id="container">
<!-- Navigation menu -->
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITÉS</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="rafting.html">Rafting</a>
<a class="dropdown-item" href="canyoning.html">Canyoning</a>
<a class="dropdown-item" href="saut-parachute.html">Saut en parachute</a>
<a class="dropdown-item" href="soufflerie.html">Simulation de chute libre</a>
<a class="dropdown-item" href="saut-elastique.html">Saut à l’élastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÉVÉNEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link contact" href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<div class="hamburger">
<span style="font-size:30px;cursor:pointer;color: white;" onclick="openNav()">☰</span>
</div>
</nav>
</header>
<div id="myNav" class="overlay">
×
<div class="bar overlay-content">
ACTIVITÉS
OFFRES
ÉVÉNEMENTS
À PROPOS
ESPACE HANDICAP
CONTACT
</div>
</div>
My CSS:
.logo {
margin-right:5px;
}
.my-nav{
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.navbar-nav > li {
padding-left:25px;
padding-right:45px;
float:none;
display:table-cell;
text-align:center;
font-size: 15px;
font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #fc3218;
}
.nav-link:active {
color: #fc3218;
}
.navbar {
background: grey
}
.dropdown-menu {
color: white;
background-color: #fc3218;
}
.dropdown-item {
color: white;
font-size: 14px;
}
.navbar-collapse {
flex-grow: 0.3;
}
Have you tried something like this?
navbar{
background-color: transparent;
}
If that doesn't work, add !important to break the predefined bootstrap styles
Set the opacity of the container for nav bar to 0.
Note: Place the elements of nav bar in different div otherwise the text in nav bar will also get effected.
Related
I'm using bootstrap's responsive navbar, in mobile devices it displays a dropdown menu. This menu, be default, is aligned to the left. I changed this so that is displays to the right. I did achieve this. However, when I test on my iPhone (XR), the dropdown first shows on the left and quickly moves to the right, on its own. How can I stop this?
You can see a small video of what's happening here.
/* Navbar */
.navbar-light .navbar-toggler {
color:rgba(46, 46, 46, 1);
border-color: transparent;
}
.navbar-custom {
background-color: #ffffff;
}
.navbar-custom .navbar-brand img {
width: 75%;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(46, 46, 46, 1);
font-size: 0.9em;
text-transform: capitalize;
font-weight: 600;
border-radius: 0;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #DA3D0D;
text-decoration: none;
}
.navbar-custom-dropdown {
border-radius: 0;
}
.navbar-custom-dropdown li a {
font-weight: 600;
line-height: 2em;
font-size: 0.9em;
}
.navbar-custom-dropdown li a:hover,
.navbar-custom-dropdown li a:focus {
background-color: #ffffff;
color: #DA3D0D;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="index.html">
<img src="images/logo-briones-monolithic.svg" alt="Briones Monolithic">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-custom-link" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROYECTOS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
GRUPO MONOLITHIC
</a>
<ul class="dropdown-menu navbar-custom-dropdown" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">BRIONES MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">BE MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">ELECTRIC MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">GRUPO MONOLITHIC</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACTO</a>
</li>
</ul>
</div>
</nav>
<!-- /NAVBAR -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
first question, how to swap two divs, i want the image on the left and the text next to it
https://codepen.io/madaffakiren/pen/PomedWx
2nd question, I want to lower the "dropdown" but when I do it with margin-top then the "dropdown" disappears on hover, how to assign this blind spot (https://i.imgur.com/8mpN8BL.png) to dropdown?
HTML:
<!-- ======== Navbar ======= -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/"><img src="img/logo4.svg" width="120px" height="32px" alt="logo"></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
data-target=".navbar-collapse.show">Sample</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Sample</a>
<a class="dropdown-item" href="#">Sample</a>
</ul>
</li>
</li>
<li class="nav-item">
<a class="nav-link " href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
padding: 10px 0;
background-color: #37517e;
}
.navbar .nav-item {
margin: 0;
padding: 0;
}
.navbar .nav-item .nav-link {
font-size: 15px;
font-weight: 500;
color: #ffffff;
padding: 0;
margin-left: 35px;
transition: all 0.3s ease-in-out;
}
.navbar .nav-item .nav-link:hover {
transform: translateY(-3px);
color: #03b0d5;
}
.navbar .nav-item .dropdown-menu {
border: none;
margin: 20px 0;
background-color: blue;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
I am beginner webdeveloper. I use my project in Bootstrap 4.
I have menu with underline animation. It's work fine.
I have this code (menu and css):
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
}
#media (min-width: 994px) {
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
display: inline;
position: relative;
overflow: hidden;
}
.navbar-light .navbar-nav .nav-link:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: #0ad3f1;
height: 2px;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.navbar-light .navbar-nav .nav-link:hover:after,
.navbar-light .navbar-nav .nav-link:focus:after,
.navbar-light .navbar-nav .nav-link:active:after {
left: 0;
right: auto;
width: 100%;
}
}
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100 pt-lg-0">
<a class="navbar-brand" href="/">
<img src="images/logo.svg" class="brand-logo pb-2 pt-3 pt-md-0" title="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<li class="nav-item d-block d-lg-none d-xl-block text-center">
<a class="nav-link active" href="#">Start</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">5</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">4</a>
</li>
<li class="nav-item text-center">
<a class="nav-link nav-link-selected" href="#">3 </a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item mx-xl-4 mb-2 mb-md-0 text-center">
<a class="nav-link order-visit" href="#">1</a>
</li>
<li class="nav-item text-center text-lg-right">
123
</li>
<li class="nav-item text-center d-inline-block d-lg-none language-box2">
abc
</li>
</ul>
</div>
</nav>
It's work fine, but I want underline animation for only first 4 elements in this menu.
I would like the current functionality to remain the same, but only for the first 4 items of my menu
How can I make it?
Please help me.
You haven't specified which selectors you want to emphasize, but I'm guessing it's navbar-nav li. I'll write you the rules for how to style the first 4 elements of many:
.navbar-nav li:nth-child(1),
.navbar-nav li:nth-child(2),
.navbar-nav li:nth-child(3),
.navbar-nav li:nth-child(4) {
/*here you specify the styles you need for underlining*/
}
Picture for navbar :
Expected :
Reality :
can I get fix for that
my navbar code
<nav class="navbar navbar-default navbar fixed-top">
<div class="container-fluid">
<div class="navbar-header">
NavbarBrand
</div>
<nav class="nav navbar-nav navbar-right">
<li>Link</li>
<li>A</li>
<li>A</li>
</ul>
</div>
</nav>
a:link {
color: gray;
}
.nav-link:hover {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="nav bg-dark text-white">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
also check this fiddle.
for get navbar middle of the page use <ul class="nav justify-content-center"> for get the nav at right side of page use <ul class="nav justify-content-end"> for more about bootstrap basenav
<div class="navigation">
<div class="navigation__container">
<div class="navigation__container_logo">
NavbarBrand
</div>
<nav class="navigation__container_menu">
<ul class="navigation__container_menu_list">
<li class="navigation__container_menu_list--item">
link
</li>
<li class="navigation__container_menu_list--item">
link
</li>
</ul>
</nav>
</div>
</div>
.navigation{
padding: 10px;
&__container{
display: flex;
align-items: center;
border: solid 1px #000;
border-right-color: transparent;
border-left-color: transparent;
padding: 5px 20px;
&_logo{
max-width: 100%;
}
&_menu{
flex: 1;
max-width: 100%;
&_list{
display: flex;
justify-content: flex-end;
align-items: center;
&--item{
margin-right: 10px;
> a{
color: #000;
font-size: 12px;
}
&:hover{
>a {
color:#f90;
}
}
}
}
}
}
}
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo horizontal-logo" src="LOGO link" alt="logo">
</a>
<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">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background: #f2f2f2;
}
.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 0;
}
JS
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
Hi I have read your code and I had previously solved the same issue for someone else, I have made a small and simple navigation system in CodePen which will help you fix the alignment issue of your navigation system. Additionally, there are three line of code which do not need to be there in the html file. They are <div class="container-fluid"> and <li>A</li> and <nav class="navbar navbar-default navbar fixed-top">.
When building the navigation system you do not need to declare that it is a navigation bar in the html file, the <ul> tag and <li> tag are an unordered list in the first place and all navigation bars are an unordered list. Furthermore, I have added the CSS code to help you fix the alignment of the unordered list, and there is a code which will sort out any white space in you navigation system
Additionally, the navigation bar in the link below does not use any bootstrap tools, the navigation bar is purely css and html. I hope this link is helpful
Here is a link below:
[https://codepen.io/X_Viperxz72/pen/zYrEZGB]
My nav links are appearing like so:
/* You can add global styles to this file, and also import other style files */
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
Rather than side by side.
Anyone know how to
Fix this so that the links appear horizontally.
The colour of the nav links do change when I hover over them, however they don't reflect the page I'm currently on - so it would be a great if I could have this working too.
you just have to add nav class to <ul class="navbar-nav"> your problem will solve.
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
Note: make snippet full width and check it will work perfect. if you want to make all the link in same line in small devices also you need to make media css for that.
I hope this will help you.
Thank You...
Try inline-block on li
/* You can add global styles to this file, and also import other style files */
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
.nav-item{
display: inline-block;
margin-right: 10px;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
And second for second try this RouterLink does not work
It is because the default behaviour of an unordered list ( <ul><li></li></ul> ) is to stack vertically. One way to style this differently is by making its parent flex and justify it's child elements in a way you prefer. In the following example this has been done with flex:
.navbar-custom {
background-color: #4082e485;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
/* added code to make the navigation horizontal */
#navbarNav {
display: flex;
justify-content: center;
align-items: center;
}
.navbar-nav {
display: flex;
justify-content: space-evenly;
}
.navbar-nav li {
list-style-type: none;
padding: 0 15px;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
</ul>
</div> <!-- navbar-collapse.// -->
</nav>
Here are more examles of navbars
Navbar
Home
About
Services
Here are more examles of navbars https://bootstrap-menu.com/index.html