Tried to find the solution for RWD to header section using boostrap but not working for ipad and phone.I want to show logo and menu and nav cart for responsive.How to achive to get the solution.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark mb-5">
<a class="navbar-brand" href="#" routerLink='/products'><img width="50" height="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROSGhNugPi-wkkvEePwHNppt8AaZRlUk-y9yEapagLNUaXxy_G" class="logo mr-2" /></a>
<div class="navbar-expand mr-auto">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink='/home'>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/service'>Service</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/about'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/contact'>Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test1'>test1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test2'>test2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test3'>test3</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test4'>test4</a>
</li>
</ul>
</div>
<div class="navbar-expand ml-auto navbar-nav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
<i class="fa fa-github"></i>
</a>
<a class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="nav-item nav-link" href="https://medium.com/#beeman" target="_blank">
<i class="fa fa-medium"></i>
</a>
</div>
</div>
</nav>
Demo:https://stackblitz.com/edit/tutorial-angular-cli-v6-styling-bootstrap-ywyjmv?file=src/app/ui/header/header.component.html
Related
I created a navigation Bar using bootstrap in Angular, however I have encountered an issue when adding a user icon as shown in the picture below, that problem does not happen if I instead use a text as shown Below (My Account). How can I fix this and make sure the user icon is centered aligned just like the rest of the links in the navbar?
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img
src="assets/images/myImage.png"
alt="my-image"
loading="lazy"
class="logo"
/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img
src="assets/images/user.png"
alt="user-logo"
loading="lazy"
class="logo"
/>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Item</a></li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here you go...
The solution that #ethry suggested is not the best one (even though it works). Why using CSS if this can be done with Bootstrap? You just need to add d-flex justify-content-center to the nav-item.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img src="assets/images/myImage.png" alt="my-image" loading="lazy" class="logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active d-flex justify-content-center">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown d-flex justify-content-center">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="assets/images/user.png" alt="user-logo" loading="lazy" class="logo" />
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Item</a>
</li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
You can use the <center> tag to do this, but I would recommend using CSS instead.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img
src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
alt="my-image"
loading="lazy"
class="logo"
/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<div style="text-align: center;"><img
src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
alt="user-logo"
loading="lazy"
class="logo"
style="border: 1px solid lime; /*remove*/"
/></div>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Item</a></li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>
The center tag has been deprecated, and is not supported by some browsers, so you should probably use the CSS option above instead of <center>.
You can also remove that green border, I just put it there to show that it was actually centered.
Any suggestions how to get the alignement of the navbar correct?
The logo is not in the middele and the menu is pushed to the right.
Check also: https://torza.nl/rsw2
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
</div>
After the changes suggested by Aleksandr Belugin it looks like (still not centered)
Your HTML STRUCTRURE should be as following
<header class="header-container">
<div class="row justify-content-between align-items-center">
<div class="col">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"
style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i>
<span>Send email</span>
</small></a> </li>
<li class="nav-item"> <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i
class="fas fa-phone-volume"></i>
<span>+31 (0) 184-632456</span>
</small></a> </li>
</ul>
</div>
<div class="col-auto">
<a class="navbar-brand" href="index.php"><img class="img-fluid d-block" src="img/logo.png"
alt="Rotterdam Steel Works"></a>
</div>
<div class="col">
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_metaalunie.png" width="45" alt="Metal Union"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png"
width="45" alt="CE NEN EN1090"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png"
width="45" alt="Lloyds stamp authorized"></a></li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
</div>
<nav class="row menu-container justify-content-center">
<div class="col-auto">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>
<span>Home</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>
<span>About us</span>
</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>
<span>Services</span>
</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>
<span>Markets</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>
<span>Certification</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>
<span>Media</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>
<span>Contact</span>
</strong></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Your CSS style should be
.header-container .navbar-brand {
width: auto;
height: 100%;
}
Suggestions -> Don't use font tag, instead use css to style font. its way long back old method to style html element.
Always use HTML5 Semantic tags. :)
Remove flex-grow:1 from .navbar-collapse or add flex-grow-0 class.
and justify content property- justify-content:space-between or add justify-content-between class.
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1; /*Remove this property */
-ms-flex-align: center;
align-items: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between; /* add this property */
margin-right: -15px;
margin-left: -15px;
}
To align the menu towards right add float-right class.
<div class="row justify-content-between align-items-center float-right
">
<div class="navbar-collapse collapse show" id="navbarResponsive" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
As you resolved the first one for centering the menu just add class
justify-content-center on your second header parent
<div class="collapse justify-content-center navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
Using bootstrap add to left <ul> after brand, class justify-content-end and if you want your menu also to be centered add class justify-content-center to div, what surrounds <ul class="navbar-nav">
Also your could add some bottom space to brand to separate it from menu by adding class, for example , mb-3 to it
Should be something like this
<div class="row">
<ul class="collapse navbar-collapse navbar-nav">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand mb-3" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav justify-content-end">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
I want to change some styles in nav-item. I made another style sheet and in that I made this code. The problem is that in Internet Explorer it works fine but in Firefox nothing changes. How can I make some changes in nav-link active?
For example, I want to have a border-bottom when the nav is active.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<div class="justify-content-end collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">ABOUT US</a>
<a class="nav-item nav-link" href="#">SERVICES</a>
<a class="nav-item nav-link" href="#">TEAM</a>
<a class="nav-item nav-link" href="#">CLIENTS</a>
<a class="nav-item nav-link" href="#">CONTACT</a>
</div>
</div>
</nav>
</div>
add this css in your custom style
.nav-item.active
{
border-bottom:2px solid #f00;
}
.nav-item.active
{
border-bottom:2px solid #f00;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="justify-content-end collapse navbar-collapse" id="collapsibleNavbar">
<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 US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLIENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
$('.nav-link').click(function() {
$('.nav-link').removeClass("active");
$('li.nav-item.active').removeClass("active");
$(this).addClass("active");
});
.active {
border-bottom: 2px solid #f00;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="justify-content-end collapse navbar-collapse" id="collapsibleNavbar">
<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 US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLIENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
I need to have a navbar with elements to the right, and to the left.
I got this working but the items that are on the left (sign up, login to the left) are not positioned to the most left.
How can I achieve something similar to what this page has?
https://www.stickermule.com/
Desire result:
What I have:
Code:
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav mr-auto navbar-right">
<li class="nav-item active">
<span class="glyphicon glyphicon-globe"></span>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">LogIn</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
Bonus:
I'm trying to render a gliphycon icon as a nav item but it doesn't show in navbar. why?
Take a look at Bootstrap 4 documentation on navbars as you used some wrong class names. Check the rest for better understanding of bootstrap features. Bootstrap 4 is different in many ways from Bootstrap 3. You used some classes that don't work in new version. So again: check the docs :)
Remember that only 1 nav-item element should also have class active.
About the icons:
Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
Here I used FontAwsome
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LogIn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
I'm using bootstrap tabs but the text in the nav links are not appearing. Do you know why?
Example:https://jsfiddle.net/o1w0m4os/
HTml:
<ul class="nav nav-pills bg-light-gray" role="tablist">
<li class="">
<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block">tab 1</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block">tab 2</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
<span class="d-none d-lg-inline-block"> tab 3</span>
</a>
</li>
</ul>
you put this class d-none what says in css display: none!important;
so remove d-none
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills bg-light-gray" role="tablist">
<li class="">
<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
<span class="d-lg-inline-block">tab 1</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
<span class="d-lg-inline-block">tab 2</span>
</a>
</li>
<li class="disabled">
<a class="nav-link" href="#tab3" name="myCongresses" data-toggle="tab" role="tab">
<span class="d-lg-inline-block"> tab 3</span>
</a>
</li>
</ul>