Making use of bootstrap 4 and Material Icon in a Nav bar and icons are not aligned properly
You may see that in this fiddle
https://jsfiddle.net/saamisolutions/7phge3ro/5/
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="material-icons">home</i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">build</i>Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">person</i>User Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">more_horiz</i>More</a>
</li>
</ul>
</div>
</div>
</nav>
Just add this code to your code.
a.nav-link {
display: flex;
align-items: center;
}
here is the working codepen for your code. https://codepen.io/irinnahar/pen/KjGpoL
You can use css vertical-align to fix this issue. I recommend to apply to all Material Icons.
.material-icons {
vertical-align: middle;
}
Alternatively you may use margin-right: 5px for a bit more breathing space.
See the fiddle: https://jsfiddle.net/mhrabiee/t0ynL69w/1/
Related
I'm making a portfolio and would like my name to be on the left of the navbar and the navbar list items to be on the right. I used the float:right property but it didn't move the list items to the right. Here is my code. I'm using bootstrap btw.
<nav class = "navbar navbar-expand-md navbar-dark bg-dark">
<h1> Aiya Siddig</h1>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "index.html"> About Me </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "portfolio.html"> Portfolio </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "contact.html"> Contact </a>
</li>
</ul>
</nav>
CSS:
.nav-link, .nav-item {
font-size: 18px;
text-align:right;
float:right;
}
h1 {
color: rgb(236, 236, 236);
}
You can use native bootstrap responsive flex classes like d-flex and justify-content-between in your nav to move your links to the right of navbar
To color your h1 you can simply use the class text-white to show the name as white color.
Live Demo:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
<h1 class="text-white"> Aiya Siddig</h1>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"> About Me </a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html"> Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact </a>
</li>
</ul>
</nav>
I followed this code having the left brand and center links :
.flex-fill {
flex:1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
When I try to push the brand a bit farther to the right the links are also moved to center in the remaining space.
Is there a way that I can move the brand further to the right and still have the links centered in the whole width of the window rather then the remaining space to the right of the brand?
By applying position: absolute to the "Brand" span so you can move it independently from the menu, also removing the useless div spacer and the d-flex classes because the navbar class is already using display : flex by default, I have applied a margin-left of 3rem to the "Brand" span with the help of bootstrap's ml-5 class helper just for demo purpose (you can set your own margin at your convenience).
Code below :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.flex-fill {
flex:1;
}
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand position-absolute ml-5">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
I haven't been working on code for ages and I'm facing an issue that is getting me crazy cause I can't even start doing anything. I'm working on the very base of my website and when I try my page the navbar automatically goes on Mobile mode while I'm on desktop.
I tried on Chrome and Firefox with the same results : a shrinked navbar on full-size page (it's not even working correctly as it's not the good size). Reducing the window's size will make the mobile navbar work correctly but impossible to get a normal one.
I've tried different styles of navbar from Codepen to see if my code was wrong but same problem. I even tried using Bootstrap 3 instead of 4 and the code gets even worst.
This one for example is wrong : https://codepen.io/mmgolden/pen/JNewdL
HTML Head :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
HTML Body :
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-left">
<ul class="nav navbar-nav">
<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>
<a class="navbar-brand mx-auto" href="#"><div id="logo"></div></a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<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>
<!-- Mobile -->
<div class="collapse" id="navbarMobile">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
</ul>
</div>
</nav>
<div class="slider">
</div>
</body>
CSS :
.slider {
background: #333;
height: 400px;
width: 100%;
}
#logo {
background: #ccc;
width: 150px;
height: 70px;
}
.navbar-toggler {
margin-top: 15px;
}
#media screen and (min-width: 992px) {
.navbar {
height: 130px;
}
#logo {
width: 260px;
height: 120px;
position: relative;
bottom: -20px;
}
.navbar-light .navbar-nav .nav-link {
padding-right: 75px;
}
#nav-left {
padding-left: 30px;
}
}
Screenshot : https://ibb.co/KDFqfTH
I need it it show up normally on desktop and shrink on mobile/tablet.
Thanks for your time.
I want to create a gap above navigation bar for echo name like: Welcome Sarah! Kindly check the image what output I am getting:
In above image I want to echo Welcome Sarah above the Login | Sign Up buttons.
I want to show search bar above the Adidad Shoe Store Starting from let-top. And welcome Sarah on the right-end. Then navigation will show.
my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row float-right" >
// Search bar
<input type="text" placeholder="Search" name="search">
Hello Sarah!
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Adidas Shoe Store</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#007bff;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
</li>
</ul>
</div>
</nav>
This is not working as expected because Bootstrap .fixed-top class assigns z-index value of 1030 and position:fixed at top to the nav.
As a result, the .container you added is displayed both behind and not above the nav.
The .container needs position other than static and z-index greater than 1030 to display above the nav. Additionally, the nav needs some padding-top to make visual space for the .container contents in this scenario.
The following structure and added CSS achieves the effect you're looking for:
<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">
<div class="row">
<div class="col-sm-6">
<input type="text" placeholder="Search" name="search">
</div>
<div class="col-sm-6 text-right">
Hello Sarah!
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">
(I've thrown in two .col-sm-6 divs inside your .row to make things easier to arrange on mobile resolutions; also note that .container class is of limited width unlike nav so you should change it to .container-fluid)
I have a site that I've created with Bootstrap. At the top of my site, I have two rows for navigation. The code for those rows looks like this:
<nav class="navbar navbar-dark bg-info horizontal-nav">
<ul class="nav navbar-nav list-inline">
<li>home</li>
<li class="selected">about</li>
<li>contact</li>
</ul>
</nav>
<nav class="navbar horizontal-nav navbar-light bg-faded">
<ul class="nav navbar-nav list-inline">
<li>intro</li>
<li>service</li>
</ul>
</nav>
When this renders, it looks something like this:
+---------------------------------------+
| home about contact |
+---------------------------------------+
| intro service |
+---------------------------------------+
I'm trying to show a triangle for a selected item. So that way the user knows where they are at. In essence, I'm trying to do something like this:
+---------------------------------------+
| home about contact |
+----------^----------------------------+
| intro service |
+------------^--------------------------+
How do I do that with CSS / Bootstrap? Thank you!
Use content after to create the shape and then add it to the active Bootstrap state. See example.
.navbar.navbar-dark,
.navbar.navbar-light {
height: 60px;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -15px;
left: 50%;
top: -20px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<nav class="navbar navbar-dark bg-info">
<ul class="nav 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="#">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<hr>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Intro <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#">Services</a>
</li>
</ul>
</nav>
</div>