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>
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.
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
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>
This question already has an answer here:
Create responsive Bootstrap navbar with two rows
(1 answer)
Closed 3 years ago.
I have changed the code of the standard fixed nabar header in BootStrap (no changes in CSS) to achieve to get the menu items below the logo like
But when using the code I am getting
Any suggestions?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<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"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456"><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="400" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" 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="60" 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">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Over RSW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php">Certificering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<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"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456"><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="400" 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="60" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" 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="60" 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 mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Over RSW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php">Certificering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
Change this code and say what happened pls...
I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.
I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.
Here is my code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<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="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<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="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demo - Bootstrap 4 navbar with 2 rows
Here's another variation with the 2 rows and right align search form:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo - Navbar with 2 rows on right
Update for Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 2 navbars with one mobile toggler
Bootstrap 4.0 - Two NavBars that collapse into one toggle
How can I have Brand and Navbar on separate lines?
How move 'nav' element under 'navbar-brand' in my Navbar
How to place navbar below sticky navbar using bootstrap 4?
Bootstrap 4 Multiple fixed-top navbars
The "variation with the 2 row aligned right" did not right-align the rows in Safari for me. I put the unordered lists in a new div with the flex-column and ml-auto classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<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="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<app-searchbox class=""></app-searchbox>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<fa icon="user" class=""/></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<fa icon="heart" class=""/></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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>
</div>
</div>
</nav>
</template>
<script>
import searchbox from '#/components/search.vue'
import dropCart from '#/components/drop-cart.vue'
export default {
name: 'navbar',
props: {
msg: String
},
components: {
'app-searchbox':searchbox,
'app-dropcart':dropCart
}
}
</script>
<style lang="sass">
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<div class="container ">
<form class="d-flex">
<input class="form-control rounded-0 ml-5" type="search" placeholder="Search product here..." aria-label="Search">
<button class="btn btn-outline-success rounded-0" type="submit">Search</button>
</form>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<i class="fas fa-cart-plus"></i></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<i class="fas fa-cart-plus"></i></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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>
</div>
</div>
</nav>
<!-- help http://wa.me/+94711308100 -->