This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am trying to achieve to divide my navbar in two equal parts. In which the right side should be my menu and left side should be my icon and search bar. And on click the search bar it should extend to the rest of the half in left part. I have successfully use the fixed navabar. But I am facing issue in aligning my menu to the right side.
This is how it's look.
As you can see the menu is not completely right align. And after following the post on SO looks like float : right won't and didn't work.
I am not sure how can I fix this.
Here is my code:
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
In Elements in browser I tried setting with margin-right but these values are going in negative, which I don't think is right way to do.
Also I am new to front end development and bootstrap framework which I am finding very confusing. So any help would be highly appreciated.
ul.navbar-nav{
position:absolute;
right:0px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Alright - I had a similar problem not too long ago and the solution is using the built in bootstrap mr-auto and ml-auto classes on your uls. Though this would solve the problem, ideally you'd have an ul for every section of the navbar (i.e. a ul for the search and another for the links on the right)
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2 mr-auto">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
After following #ZimSystem's answer here, ml-auto push item to right in bootstrap 4 beta.
Finally got this code working.
<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 fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
Related
I am currently having trouble creating 2 rows and getting align logo(heading) to the left, 'Home' and 'User' menu links to the top right corner. The second row should display 'Link1', 'Link2', 'Link3' menu in the center. The following code doesn't seem to align properly.
I have tried to use 'navbar-nav mr-auto' for logo but it didn't work. Also tried 'Home', 'About' links 'ml-auto'. It doesn't work.
*******************************************************************************************
Home About User
Logo Heading1
Link1 Link2 Link3 Link4
*******************************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand mr-auto" href="">
<img style="width: 72px; height: 71px;" src="logo-1.png">Heading
</a>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<ul class="navbar-nav mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
<div id="divSubMenu" runat="server" >
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help You.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
<ul class="navbar-nav mb-5">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Hope below code will help you
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
If u want out put like you have provided text above logo above middle on below
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light align-items-start">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
You can try stacking multiple navbars in bootstrap 4 as shown below. Please see if this answer is acceptable for you requirements. Hope this helps!
EDIT: Updated my code to only have two rows as requested in the question. Good luck champ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Stack Answer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive1">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
Stack Answer
</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>
I am making a website with Bootstrap and the navbar to stick to the top however using the class sticky-top doesn't seem to do anything.
Here is the code for the nav:
<div class="row">
<div class="col-md-12">
<ul class="nav justify-content-center sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
Hope someone can help!
You need to put sticky-top to the container of your navbar, if that row is the navbar, then you need to put it there instead of its child.
/* For displaying */
body {
height: 300vh;
background-image: linear-gradient(to bottom, white, black);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- You need to move sticky-top to the outer element of navbar, which is here -->
<div class="row sticky-top">
<div class="col-md-12">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
Currently I try to build a Navbar that is responsive. I use Bootstrap for my css. What I want is that: On a small viewport all links but the Navbar-brand is listed within one row. The Navbar on a large viewport looks like this (as expected):
But when I shrink the viewport the Navbar looks like this:
I already managed some viewport configurations, that e.g the username is not displayed on a small viewport. The HTML looks as follows (Btw. I will only show some mocked nav-items, since this is not important for the question:
HTML
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto">
Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
It seems a bit difficult to achieve what you want without drastically changing the whole html structure of your navbar. I am not sure if you are up for that. So I would suggest keeping 2 buttons for "Stories". Show one button in mobile view and the other in desktop view. This will ensure minimal regression impact to your html structure.
Button for desktop views
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
Button for mobile view
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<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-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto"> Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-md-none">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
in every mobile it shows same like this image
HTML:
<div class="wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top " >
<div class="container">
<img src="image/logo3.png" height="30px" alt="">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
Home
</li>
<li class="nav-item active">
About Us
</li>
<li class="nav-item active">
<a href="#service" onclick="href='index.php#service'"; class="nav-link" >Services</a>
</li>
<li class="nav-item active">
Our CLients
</li>
<li class="nav-item active">
Our Team
</li>
<li class="nav-item active">
products
</li>
<li class="nav-item active">
Contact
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<a href="contactits.php" class="btn nav-link active" style="background-color: transparent;border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
border-color: lightgray;">+92-42-35791029</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
This must be the browser version installed on your S3. Or it's not a browser that's supported by Bootstrap 4.
Update the browser and everything will be fine.
Most of the examples I found just hide everything except for the brand-logo and just show one toggle icon. But I want multiple icons on small screens but at the moment they wrap on xs size even if they have enough space.
I also replace the bigger icons by smaller icons now, but as it's not the missing space I guess, this does not help either.
The brand-logo and the two icons simply should be in the same line. Can someone please push me in the right direction. You have to run the code-snippet in an own window to make it small enough (problem is just on xs size).
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-48 { font-size: 48px; }
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
You can use flex-row in the navbar and navbar-nav to prevent it from stacking vertically on xs screens..
https://www.codeply.com/go/beHGmETlkM
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<div class="navbar-collapse collapse">
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
</div>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
https://www.codeply.com/go/beHGmETlkM