I'm using the admin template CoreUI. My layout is the basic one as described in the page https://coreui.io/v1/docs/layout/options/
I'm trying to have the aside menu on the right to open floating over the main content and not inline decreasing the width of main.
I've tried to remove aside-menu-fixed, add aside-menu-floating or absolute, but it doesn't work.
Is there a way to do it without modifying the CoreUI css?
Below the code snippet, but it doesn't work here on SO
.app-header{background-color:#4B8BF4}
.sidebar{background-color:#FFCD42}
.app-footer{background-color:#DD4F43}
.aside-menu{background-color:#19A15F}
.main{background-color:#EEE}
<link href="https://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/css/coreui.min.css" rel="stylesheet"/>
<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://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/js/coreui.min.js"></script>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<header class="app-header navbar">
<!-- Header content here -->
<h2>I'm the header!</h2>
</header>
<div class="app-body">
<div class="sidebar">
<!-- Sidebar content here -->
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="nav-icon icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-title">Settings</li>
</ul>
</nav>
</div>
<main class="main">
<h1>I'm the main content...</h1>
</main>
<aside class="aside-menu">
<!-- Aside menu content here -->
</aside>
</div>
<footer class="app-footer">
<!-- Footer content here -->
</footer>
</body>
body element:
add class aside-menu-off-canvas
and remove class aside-menu-fixed
hth
Related
This question already has answers here:
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 2 years ago.
I am facing an issue with the bootstrap 5 navbar. I am trying to create a responsive navbar with bootstrap 5. I want the navbar logo will be on the left side and the nav-links on the right side. But when I used the 'navbar-expand-lg' class it both aligns the logo and nav-links on the left side.
I used the ml-auto class in the ul tag. But it didn't work. Can anyone please help me?
Note: I think mr-auto and ml-auto classes are not working perfectly in bootstrap 5.
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link rel="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav">
<ul class="navbar-nav ml-auto">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
Yes, you are right. Negative margins are disabled by default but can be enabled in Sass by setting $enable-negative-margins: true. Read their Documentation: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin
Or you can write in your custom CSS. Check my code -
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
.navbar-nav{
margin-left: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="nav">
<ul class="navbar-nav">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
I am trying to remove padding using Boostrap 4 but having no success.
If you see this image it will make sense:
I am trying to remove the yellow padding that I believe comes from the fluid container.
I tried adding this:
pb-0 mb-0
^ The above are classes to force ZERO padding/margin but still the extra padding is there.
It just feels like it is not in balance....
Here is my HTML
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
Thanks for all help
The margin seems to dissapear when you add the mb-0 class to the <ol> element:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
</head>
<body>
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Margin bottom added from class breadcrumb from bootstrap css you can remove it by using below css.
ol.breadcrumb{
margin-bottom:0;
}
Its because of default margin of ul and ol tag just add this css:
ul,ol{
margin: 0;
}
I am new to bootstrap and I need to use bootstrap 4 for creating a fully responsive menu. The main navigation should use bootstrap collapsible navbar to show a hamburger icon atthe smaller screen widths. I found a smaple code from w3 which gives me a menu in the right side and when I resize to small view the harmber icon (the toggle view) appears on the right side:
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand"></div>
<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="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>
if I remove the dummy <div class="navbar-brand"></div> just before the toggle button then in small screens view, the toggle button would jump to left rather right.
What is the proper way of setting the alignment of toggle button to right instead of left without using the dummy hacky div
<div class="navbar-brand"></div>
Thanks for your help.
Try this Jsfiddle link.
Here I have applied justify-content: flex-end !important; css rule for navbar.
.navbar {
justify-content: flex-end !important;
}
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<!-- <div class="navbar-brand"></div> -->
<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="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>
How do I get my sidemenu to remain stuck so the navigation tabs always remain on top and don't scroll with the page
How do I get the buttons to change background color on hover?
The issue is that only the text changes background color or only a small portion
THE CODEPEN
<head>
<title>Århus Gastronomi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frontpage" class="content">
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<p>Another item</p>
</div>
<div id="page2" class="content">
<p>This is page 2</p>
</div>
</body>
Add position: fixed; to your #sidebar
You may also want to add this:
.content {margin-left: 10%;}
And restructure your html like so, with the nav outside of the first content section::
<body>
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<div id="frontpage" class="content">.......
This will make it so that your content isn't behind the nav you have.
I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:
The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.
The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.
Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:
Here's my code (very much work in progress - logos will be replaced with images, etc):
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
Does anyone have any thoughts as to what is causing my problems?
As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.
It seems you are looking for a mobile menu which can be toggled.
Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:
From http://foundation.zurb.com/docs/components/offcanvas.html:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle hide-for-medium-up" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu hide-for-medium-up">
<!-- whatever you want goes here -->
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<!-- main content goes here -->
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.