Simple question here I can't figure out (probably the solution is ultra-easy I just cannot see it). If you hover the mouse on the a-element, the :before style takes the width till the end of the page.
Why is that? Any solutions to make it inherit the width from the li-element only (make it always as wide as the navigation link)?
/* navbar style */
#sidebar-wrapper {
}
.navbar {
padding: 0px;
}
.navbar li:before {
content: '';
position: absolute;
top: 0px;
height: 3px;
width: 100%;
background-color: #aaa;
transition: 0.2s ease;
z-index: -1;
}
.navbar li:hover:before {
height: 100%;
}
.navbar li:first-child:before {
background-color: #ec1b5a
}
.navbar li:nth-child(2):before {
background-color: #3DEC1B
}
.navbar li:nth-child(3):before {
background-color: #D3EC1A
}
.navbar li:nth-child(4):before {
background-color: #1B9AEC
}
<head>
<meta charset="utf-8">
<title>Matt Chowski's portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<nav class="nav justify-content-between" id="sidebar">
<ul class="nav">
<li class="navbar-brand"><a class="nav-link">Mateusz Wojciechowski</a></li>
</ul>
<ul class="nav navbar" id="navlinks">
<li><a class="nav-link active" href="#">Home</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Gallery</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
Thank you for all the help <3
Check out this code.
All I did is added position: relative; to li and also added display: flex to ul
https://codepen.io/Izulito/pen/xXmOqq
Related
Description: I'm trying to create a navbar. I am using the
bootstrap 4 framework for
that but the problem is I have simply copied the simple navbar code without dropdown
and when I'm trying to create a custom dropdown then it is showing in the main menu due
to which the height of the main menu bar also increases. How can I show a sub-menu
outside the main menu bar?
*{
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: auto;
height: 100%;
}
ul li{
margin: 0;
/* border: 1px solid turquoise; */
width: 9em;
padding: 5px 0;
text-align: center;
position: relative;
}
/* Showing border bottom animation for the main-menu */
ul li::after{
content: '';
position: absolute;
border-bottom: 3px solid #f3007f;
transform: scale(0, 1);
transition: transform .5s ease;
width: 100%;
left: 0;
}
ul li:hover::after{
transform: scale(1, 1);
}
/* Showing background: black and font color:white when hovering over the main-menu */
ul li a {
display: block;
color: white;
}
ul li a:hover{
background-color: black;
color: white;
}
.logo {
width: 4vw;
}
/* Styling the main menu */
.navbarbg {
background: #10044a;
color: white;
font-weight: bold;
}
/* Centering the main-menu elements */
.listpos{
justify-content: center;
}
/* This code is for hiding sub-menus */
ul li ul li {
display: none;
}
/* This code is for showing sub-menus when hovering over main menu */
ul li:hover ul li {
display: block;
color: white;
}
<!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">
<link rel="stylesheet" href="style.css">
<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://kit.fontawesome.com/f3e31b33a9.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbarbg">
<div class="col-md-2">
<img src="./images/ICC-Mens-T20-World-Cup-2021.jpg" class="img-fluid logo" alt="">
</div>
<div class="collapse navbar-collapse col-md-8 listpos">
<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="#">Matches</a></li>
<li class="nav-item"><a class="nav-link" href="#">Standings</a></li>
<!-- This is the dropdown code Starting -->
<li class="nav-item">
<a class="nav-link">Dropdown</a>
<ul class="" aria-labelledby="navbarDropdown">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
</ul>
</li>
<!-- This is the dropdown code Ending -->
<li class="nav-item"><a class="nav-link" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Videos</a></li>
</ul>
</div>
<div class="col-md-2 text-right">
<b>Search</b>
<span class="ml-1">
<i class="fa-solid fa-magnifying-glass"></i>
</span>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
At the very top of your this is the dropdown is starting...
A very important dropdown class is missing from the li. It should read like this <li class="nav-item dropdown">.
Each of the links in the dropdown could then also use a class added too. Each of the links should contain class="dropdown-item"
Hopefully that will fix things but other people may spot things that I didn't.
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 1 year ago.
In short - I'm writing a backend for an amateur site (I'm also redesigning the frontend), but I don't know much about the frontend, so I use bootstrap5. And I need to transfer the menu from the old version of the site to the new one. It should look like this:
I tried to rewrite this in bootstrap, but I ran into the fact that I can't position the logo exactly in the center of the menu:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/private.css">
<title>IT-Hogwarts | Добро пожаловть в школу чародейства и магии!</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg menu">
<div class="container">
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbar__content" aria-controls="navbar__content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse menu__elements" id="navbar__content">
<ul class="navbar-nav menu__nav">
<li class="nav-item">
<a class="nav-link" href="#">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Уровни магии</a>
</li>
<li class="nav-link menu-link menu-link_logo">
<a class="navbar-brand menu__brand" href="#">
<img class="menu-link__img" src="img/hogvarts.png" alt="hogwarts">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Рейтинг участников</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Личный кабинет</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap');
*{
padding: 0;
margin: 0;
}
body {
font-family: "Comfortaa";
background-color: #0C1A22;
}
ul, li {
display: block;
}
.menu {
background-color: #fbbe3a;
}
.menu__brand {
color: black;
font-weight: 800;
transition: all 300ms;
}
.menu__brand:hover {
color: #ff6106;
}
.menu-link__img {
width: auto;
}
.menu__elements {
justify-content: space-around;
}
.menu__nav a {
margin-right: 70px;
color: black;
font-weight: 600;
transition: all 300ms;
}
.menu__nav a:hover {
color: #ff6106;
}
.statistic {
margin-top: 40px;
}
.line-red {
background: linear-gradient(to bottom, #C01712 20%, transparent 20%)
}
.statistic p {
color: white;
}
#media screen and (max-width: 992px) {
.menu__nav {
margin-top: 14px;
}
.menu-link_logo {
display: none;
}
}
How can I place the logo in the center and how can I reduce the height of the menu so that the elements do not move up?
you can try this :
.menu
{
background-color:transparent;
}
.menu__elements
{
justify-content: space-around;
background-color: #fbbe3a;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
}
My current navbar is a sticky dropdown navbar that will dropdown on a hover rather than a click. I'm trying to have a bottom border on my tabs. It works when the mouse is hovering over the tab, but once the mouse leaves the tab (even to just the dropdown menu items), the bottom border disappears, even though the dropdown menu is still open. All the other hover actions I have on the tabs also go away (I had then text color set to black when hovered over). It makes sense that once the mouse isn't hovering, the changes wouldn't stay there, but the active tag doesn't work, so I'm stuck.
Basically, I want the bottom border to remain while the dropdown menu is open.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
And my CSS:
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
.dropdown-toggle{
margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a{
border-bottom: 5px solid transparent;
color:#787878;
}
.navbar-nav li.dropdown a:hover{
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow:none;
}
.navbar-nav ul.dropdown-menu a:hover{
border-bottom: 5px solid transparent;
}
You are not targeting the actual li and a tags properly.
You can simply do this .navbar-nav li:hover > a {} and this will keep the border bottom active when hovering over the submenu items.
Run snippet below and click Full Page to see the menu item working nicely.
$(document).ready(function() {
$(".dropdown, .btn-group").hover(function() {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
.dropdown-toggle {
margin-bottom: 2px;
}
.navbar .dropdown-toggle,
.nav-tabs .dropdown-toggle {
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a {
border-bottom: 5px solid transparent;
color: #787878;
}
.navbar-nav li:hover>a {
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow: none;
}
.navbar-nav ul.dropdown-menu a:hover {
border-bottom: 5px solid transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Add this to your CSS:
.dropdown .dropdown-menu li a{
border-bottom: 5px solid #002873;
}
So I had this problem for quite a while now, it has to do with the sidebar on the left because without it the white space on right side just dissapears, but I'm not sure where the problem is at, I tried looking up at other people suggestions, but nothing worked so I'm not sure what am I doing wrong, thanks!
If I add .container class to nav container, white space moves to the left side next to sidebar
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<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">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<div class="container-flex d-flex" style="width: 40%">
<div class="col">
<!--main page-->
<p>Main Content</p>
</div>
</div>
<div class="container-flex d-flex" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<p>Code Editor</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can add the class .justify-content-between to the .row:
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<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">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<div class="container-flex d-flex" style="width: 40%">
<div class="col">
<!--main page-->
<p>Main Content</p>
</div>
</div>
<div class="container-flex d-flex" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<p>Code Editor</p>
</div>
</div>
</div>
</div>
</body>
</html>
I want to fix my grid, right now its in the middle of page and whitespaces everywhere, what I want to do is sidebar to the side of page no margins, 2 columns next to sidebar in a row with no spaces between them so they together take over whole page which makes 3 columns together with sidebar, and navigation bar above all those 3 columns.
Html Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="col-md-4 bg-info">hi</div>
<div class="col-md-4 bg-dark">hi</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
CSS code:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #ffc107;
color: #000000;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #ffc107;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #000000;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #000000;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #000000;
background: #ffc107;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #e67e22;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#cont{
width: 1300px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}