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;
}
Related
I am using the navbar of this example project of Bootstrap 4.6. in my django project. Here is the code.
$(function() {
'use strict'
$('[data-toggle="offcanvas"]').on('click', function() {
$('.offcanvas-collapse').toggleClass('open')
})
})
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!--Navbar-->
<link rel="stylesheet" href="{% static 'css/quicky/navbar.css' %}">
<title>The</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge badge-pill bg-light align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="{% static 'js/quicky/navbar.js' %}"></script>
</body>
</html>
The problem lies in the last <script> tag where i am trying to use navbar.js which is in the static folder. In the console I get the following errors:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at navbar.js:4
at navbar.js:7
However if I write the js content of navbar.js file directly in the html file, I get no errors.
Why does this happen?
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
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
I am trying to center align navbar-brand;
For mobile devices, navbar-toggler, which I have right aligned, is pushing the logo off-center.
Is it possible to have these two classes align independently of each other and, if so, how?
<nav class="navbar navbar-expand-md navbar-light fixed-top" id="mainNav">
<a href="index.php#page-top" class="navbar-brand mx-auto PElogo">
<img src="https://www.theharbourhousehotel.co.uk/img/LOGO-HH-PNG.png" alt="Harbour House Hotel Logo" title="Harbour House Hotel">
<h1>Harbour House Hotel</h1>
<h2>Portpatrick</h2>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#HHnavbar" aria-controls="HHnavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="HHnavbar" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#About">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Rooms">Rooms</a></li>
</ul>
</div>
</nav>
JS Fiddle is here:
https://jsfiddle.net/nathonjones/va9g03tj/3/
Thank you.
On the toggle button (or burger menu), we know that:
the width of the burger menu is 30px
padding of 12px on left & right each
1 px for the border on left/right each
So... if we add these 30px + 2*(12px) + 2*(1px) = 56px... adding a padding left of 56px will ensure that our brand is always in the "true" middle of the navigation...
working snippet below
.navbar-brand img {
width: 90px;
}
.PElogo {
color: #000;
text-align: center;
text-transform: uppercase;
margin-top: 30px;
padding-left: 56px !important;
}
.PElogo img {
width: 90px;
}
.PElogo h1 {
font-size: 1.1rem;
margin: .5rem 0 0;
}
.PElogo h2 {
font-size: .675rem;
}
<!DOCTYPE html>
<html>
<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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light fixed-top" id="mainNav">
<a href="index.php#page-top" class="navbar-brand mx-auto PElogo">
<img src="https://www.theharbourhousehotel.co.uk/img/LOGO-HH-PNG.png" alt="Harbour House Hotel Logo" title="Harbour House Hotel">
<h1>Harbour House Hotel</h1>
<h2>Portpatrick</h2>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#HHnavbar" aria-controls="HHnavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="HHnavbar" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#About">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Rooms">Rooms</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Restaurant">Restaurant</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Attractions">Attractions</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#EventsNewsOffers">News</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Location">Location</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Gallery">Gallery</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="contact-harbour-house-hotel.php">Contact</a></li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I would like to have a sticky header and menu #fixedheader and a sticky sidebar #stickySocialIcons. I already tried position:fixed but the problem is that the whole website gets effected...
And regarding the sticky sidebar my problem is that if I use position:fixed the sidebar doesn't stop at the footer with the background and that it doesn't starts to stick to the screen when the screen touches the sidebar. It is always at the same position...
Does anybody has an idea, how I can fix that?
Here the website I am talking about: https://classymagazin.de/home/
Kind regards
This is a some idea for you , think a minuet you can do it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
and look flowing example https://getbootstrap.com/docs/4.0/examples/
learn bootstrap you can make it very easy
https://getbootstrap.com/
Try this css and JQuery for sticky header
#fixedheader {
position: fixed;
width: 100%;
z-index: 9999;
background: #fff;
}
JQuery
$(document).ready(function () {
var sticky = $('#fixedheader');
var height = sticky.height();
$(document.body).css('margin-top', height + "px");
});