I'm new to using Bootstrap and JS isn't my strongest language so I'm struggling to achieve what I'm looking for.
I have a menu for a site being generated with php like so:
<?php
$products_menu = '';
$sql1 = "SELECT * FROM headings";
$stmt1 = DB::run($sql1);
while($row = $stmt1->fetch(PDO::FETCH_ASSOC)){
$heading_id = $row['id'];
$heading = $row['heading'];
$products_menu .= '<li class="dropdown-item d-block">';
$products_menu .= '<a class="submenu-item" href="store#'.$heading_id.'">'.$heading.'</a>';
$products_menu .= '<ul class="dropdown-submenu">';
$params = [$heading_id];
$sql = "SELECT categories.category,categories.url FROM categories INNER JOIN category_headings on categories.id=category_headings.category WHERE category_headings.heading=?";
$stmt = DB::run($sql,$params);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$category = $row['category'];
$url = $row['url'];
$products_menu .= '<li class="d-block">'.$category.'</li>';
}
$products_menu .= '</ul>';
$products_menu .= '</li>';
}
?>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<?php echo $products_menu; ?>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
</ul>
</div>
</nav>
I want the first dropdown menu to be positioned outside of the parent header.
Then each item in the first dropdown should also be clickable to bring you to that heading on the store page.
Hovering on the first dropdown menu items should show its submenu to the side.
Edit
I didn't want to post the whole HTML being generated as its huge so I cut out an example of the first few headings and just the first few categories from each one
<div class="page-header header-bottom">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<img src="media/logo.png" alt="Logo" class="logo">
</div>
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<form class="form-inline search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-default bg-orange" type="submit">
<img src="media/icons/search.png" alt="search icon" class="icon">
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4 col-md-2 col-sm-2 col-xs-2">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" alt="Menu" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#1">Lifters & Accessories</a>
<ul class="dropdown-submenu">
<li class="d-block">Hooks - Weld On Hooks</li>
<li class="d-block">Manhole Cover Lifters</li>
<li class="d-block">Salt Spreaders</li>
<li class="d-block">ID Tags</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#2">Lifting & Measurement Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block">Big Bag Lifters</li>
<li class="d-block">Crane Slung Safety Cages</li>
<li class="d-block">Gas Bottle Handlers</li>
<li class="d-block">Weighers - Crane Weighers</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#3">Forklift & Crane Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block">Forklift Magnetic Sweepers</li>
<li class="d-block">Wheelie Bin Tippers</li>
<li class="d-block">Forklift Safety Cages</li>
<li class="d-block">Fork Extensions</li>
<li class="d-block">Forklift Base Emptying Stillages</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#4">Forklift Hooks & Jibs</a>
<ul class="dropdown-submenu">
<li class="d-block">Forklift Mounted Hook - Fixed</li>
<li class="d-block">Forklift Mounted Hook - Adjustable</li>
<li class="d-block">Crane Spreader Beams</li>
<li class="d-block">Forklift Jibs</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="page/About">About Us</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
I have put this together with Bootstrap 4 and some custom CSS:
.navbar-nav a {
color: #fff !important;
}
.navbar-nav a:hover {
color: #ddd !important;
}
.navbar-nav .submenu.level-2 {
padding-left: 1.5rem;
}
.navbar-nav .dropdown-toggle::after {
display: none;
}
#media (min-width: 768px) {
.navbar-nav .dropdown .submenu {
position: absolute;
top: 100%;
display: none;
}
.navbar-nav .dropdown .submenu li {
display: block;
}
.navbar-nav .dropdown .submenu li a {
display: block;
white-space: nowrap;
text-decoration: none;
}
.navbar-nav .dropdown .submenu.level-1 {
right: 0;
left: auto;
}
.navbar-nav .dropdown .submenu.level-2 {
padding-left: 0;
top: 0;
right: 100%;
left: auto;
}
.navbar-nav .dropdown:hover .submenu.level-1 {
display: block;
}
.navbar-nav .dropdown:hover .submenu.level-1 li {
position: relative;
}
.navbar-nav .dropdown:hover .submenu.level-1 li:hover .submenu.level-2 {
display: block;
}
.navbar-nav .dropdown-toggle::after {
display: inline-block;
}
}
<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-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Info</a>
<ul class="list-unstyled bg-dark text-light submenu level-1">
<li><a class="nav-link" href="#">About</a>
<ul class="list-unstyled bg-dark text-light submenu level-2">
<li><a class="nav-link" href="#">Mission</a></li>
<li><a class="nav-link" href="#">Vision</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">Clients</a></li>
<li><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Here is a jsFiddle with SCSS instead of plain CSS.
I don't know how close it is to the result you are looking for, but I hope it helps.
As per my understanding, you are looking for nested submenu. If, yes below is the solution for same.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover>.dropdown-menu {
top: 0;
left: -10rem;
/* 10rem is the min-width of dropdown-menu */
margin-top: -6px;
display:block
}
.dropdown:hover>.dropdown-menu{
display:block
}
/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand pb-2" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu</a></li>
<li><a class="dropdown-item" href="#">Submenu0</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Source Skelly Codeply
Related
i want to when scrolling it makes an active link one only active link and the others remove active ,the navbar is fixed, when it is active the link add class and the class name is active and when one link is clicked the other links should be unactive (remove class active) but it dosn't work , when i scroll down all the links are active please help
my active class css
.block{
height: 1200px;
}
.block:first-of-type{
margin-top: 1200px;
}
.navbar{
position: fixed !important;
top: 0;
width: 100%;
}
.active{
color: #000000 !important;
}
my navbar and body
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#action">action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#method">method</a>
</li>
<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>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<ul>
<li class="block" class="block" id="services">services</li>
<li class="block" class="block" id="action">action</li>
<li class="block" class="block" id="method">method</li>
</ul>
my jquery code
$(document).ready(function(){
// Add active class on navbar link and remove from siblings
"use strict";
$(window).scroll(function(){
$('.block').each(function(){
if($(window).scrollTop() > $(this).offset().top){
// console.log($(this).attr('id'));
var blockId = $(this).attr('id');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.nav-link').removeClass('active');
}
});
});
});
You are immediately removing the active class from all links after you set the currently active one. You need to remove the active class from all the other links first, then apply the new one.
Swap the order of these lines:
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.navbar a').removeClass('active');
Becomes:
$('.navbar a').removeClass('active');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
The editor here struggled with your layout, so here's a codepen showing the above: https://codepen.io/29b6/pen/ZErMGpJ?editors=1111
This works fine, but bear in mind that listening to scroll events is quite an inefficient solution, especially as you're just looping over a bunch of DOM elements each time. You might want to read up about the Intersection Observer API for a more passive approach.
How can i move this navbar menu to the right side ?
I am not able to move this navbar menu on the right side.
I have tried float right method. what will be the best solution ?
I tried many ways and no result yet, could you help thankfully to solve my problem!
Here is my code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<title>TechSite</title>
<style>
.navbar-brand{
font-size: 2rem;
}
ul.navbar-nav {
font-size: 1.15rem;
}
.nav-link {
padding: .3rem 1rem;
color: white;
}
.nav-link:hover {
color: white;
}
button.navbar-toggler {
color: white;
}
p {
color: gray;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="color: red;">
TechSite
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: white;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav float-end">
<li class="nav-item">
<a class="nav-link active rounded" aria-current="page" href="#"
style="color: rgb(173, 173, 173);border: 1px solid wheat;">
Home
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">App Development</a></li>
<li><a class="dropdown-item" href="#">Game Development</a></li>
<li><a class="dropdown-item" href="#">Web Development</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
</body>
</html>
Is it better idea to use Bootstrap 5 to solve the problem?
In flex system you give the container navbar-collapse the class justify-content-center and your option menu will be aligned to the right side.
Update your HTML code with the following
<nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="color: red;">
TechSite
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: white;"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav float-end">
<li class="nav-item">
<a class="nav-link active rounded" aria-current="page" href="#"
style="color: rgb(173, 173, 173);border: 1px solid wheat;">
Home
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">App Development</a></li>
<li><a class="dropdown-item" href="#">Game Development</a></li>
<li><a class="dropdown-item" href="#">Web Development</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I am a beginner web developer. I use in my project Bootstrap 4.
I have this code:
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<form class="mx-lg-5">
<div class="inner-addon rounded-0 navbar-search-form">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Szukaj produktu"
aria-label="Szukaj produktu"/>
</div>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Option <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Option <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="img/profile.jpg" class="pl-lg-4 pr-2"><span class="d-lg-none d-xl-inline">Zaloguj się</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2"><span class="d-lg-none d-xl-inline">Koszyk</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Preview: http://serwer1356363.home.pl/_nauka/
I need to add the number of products in the basket to my basket icon as this screen:
https://ibb.co/PcvM9Dr
How can I make it?
Please help me
You can use this code
Additional CSS :
.count{
width: 15px;
height: 15px;
border-radius: 15px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
position: absolute;
top: 15px;
left: 60px;
background: #ff420f;
}
Finally in HTML:
<li class="nav-item position-relative">
<a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2">
<span class="badge badge-primary count">5</span >
<span class="ml-2 d-lg-none d-xl-inline">Koszyk</span></a>
</li>
Dont forget to add class .position-relative inside li.nav-item
I want to apply certain css properties in particular area i.e."Dashboard" and I have assigned a class name "main" for div.col function under html for the same but when I try to apply css property in it, it gets applied to whole page.
here's the code for html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/adminboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
<link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">
</head>
<body>
<title>Admin Dashboard</title>
<!--navbar starts here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<a class="navbar-brand" href="#">Admin Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user-plus"></i> Add Users</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-copy"></i> Add Categories</a></li>
</ul>
</div>
</nav>
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
CSS code:
[![body{
font-family: 'Rosario' ;
}
.sidebar{
margin:10px -8px 20px 20px;
}
.sidebar>li>a{
padding: 20px 20px;
}
.main{
margin-top: 80px;
background-color: lightgray;
}]
I want my page to look exactly like this.: https://i.stack.imgur.com/odqIK.png
Right now it is looking like this: https://i.stack.imgur.com/PgL6l.png
I'm not exactly sure how you'll want to proceed with this project.
For what you asked, I'd go about:
no need to wrap your h1:
<h1 class="page-header">Dashboard</h1></div>
around a div.
Then, you can add your classes to your h1 and add a max-height to its css and adjust positioning with padding.
HTML:
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<h1 class="page-header col-sm-9 col-md-10 main">Dashboard</h1>
</div>
</div>
CSS:
<style>
body {
font-family: 'Rosario';
}
.sidebar {
margin: 10px -8px 20px 20px;
}
.sidebar>li>a {
padding: 20px 20px;
}
.main {
padding-top: 30px;
max-height: 100px;
background-color: lightgray;
}
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 2 years ago.
How can I align my nav items in specific position? I want my brand name to be on left side and my log in button to the right end of the navbar, I am new to bootstrap, help me in solving this thing.
.navbar-brand {
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<ul class="nav">
<li class="nav-item">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">LogIn</a>
</li>
</ul>
</div>
Result pic
You can use Bootstrap classes d-flex and justify-content-between for the ul element.
More details can be found here
.navbar-brand {
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<ul class="nav d-flex justify-content-between">
<li class="nav-item">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">LogIn</a>
</li>
</ul>
</div>
added this code to container
.container {
display: flex;
justify-content: space-between;
}
and moved the brand outside ul tag
.navbar-brand {
font-weight: bold;
}
.container {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
<title>NotePro</title>
</head>
<body>
<div class="container">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
<ul class="nav">
<li class="nav-item ">
<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="#">LogIn</a>
</li>
</ul>
</div>
</body>
</html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--here is your code below-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Use ml-auto on your UL