I have a push-left menu, when I clicked the hamburger icon, push menu will slide in and “push” the main content aside when toggled, but I can swipe the page to the right. See this :
I want to make the main area unswipeable when push menu is toggled. Here is my code :
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Titillium Web', sans-serif;
background-color: #fbfbfb;
overflow-x: hidden;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
max-width: 300px;
}
#sidebar .nav {
width: 95%;
}
/* collapsed sidebar styles */
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
}
/* navbar override */
.navbar-toggle,
.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-toggle:active {
float: left;
background-color: #fff !important;
margin: 12px 0px 8px 15px;
}
.navbar-toggle .icon-bar {
background-color: #ddd !important;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle:focus .icon-bar,
.navbar-toggle:active .icon-bar {
background-color: #03A9F4 !important;
}
.navbar-default {
background-color: #fff;
}
.navbar-brand {
padding-top: 10px;
/* padding-left: 28px; */
}
.navbar {
min-height: 60px;
margin-bottom: 0px;
border-bottom: 1px solid #E2F1FF;
}
.navbar-dashboard .navbar-brand {
padding-left: 28px;
}
.paket-navbar {
font-size: 1.3em;
}
.paket-navbar a {
color: #3E3E3E;
line-height: 30px;
}
.paket-navbar a:hover {
color: #03A9F4;
background-color: transparent !important;
}
.paket-navbar-secondary {
margin-top: 10px;
}
.paket-navbar-secondary > li > a {
padding-left: 57px;
}
#media screen and (max-width: 767px) {
.paket-navbar-secondary > li > a {
padding-left: 47px;
}
}
.paket-navbar-secondary a {
color: #858585;
line-height: 25px;
}
.paket-navbar-secondary a:hover {
color: #03A9F4;
background-color: transparent !important;
}
.paket-navbar>li.active>a {
color: #03A9F4;
}
#sidebar > ul.nav.paket-navbar > li > a > i {
margin-right: 20px;
}
#media screen and (max-width: 767px) {
#sidebar > ul.nav.paket-navbar > li > a > i {
margin-right: 10px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-container">
<!-- top navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar-dashboard">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo base_url('home') ;?>"><img src="<?php echo base_url('asset/img/paketid-logo-240.png')?>" alt="Paket ID" height="40" width="120"></a>
<p class="nav-username pull-right navbar-text visible-xs"><?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'#')); ?></p>
</div>
<p class="nav-username pull-right navbar-text hidden-xs">
<?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'#')); ?>
</p>
</div>
</div>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav paket-navbar">
<li <?php if ($_controller=="dashboard")echo "class='active'"?>><i class="fi flaticon-home"></i> Dashboard</li>
<li <?php if ($_controller=="book")echo "class='active'"?>><i class="fi flaticon-copy"></i> Book</li>
<li <?php if ($_controller=="settings")echo "class='active'"?>><i class="fi flaticon-setting"></i> Settings</li>
<li><i class="fi flaticon-caret-left"></i> Sign out</li>
</ul>
</div>
What did I do wrong? Thanks in advance..
Here is a basic example of side menu.
At first look at structure of html. There are two blocks: header and page.
Header isn't interesting, it just contain hamburger button (red).
Pagecontains two blocks: menu and content. It has display: flex and hides menu by transform: translateX(-200px). Menu has fixed width that equals width: 200px. When you click button, you add class opened to page and remove transform: translateX(-200px). So you can see now a menu. But page has overflow-x: hidden and there is no horizontal scroll.
$('.button').on('click', function() {
$('.page').toggleClass('opened');
});
* {
box-sizing: border-box;
}
.screen {
width: 320px;
height: 480px;
border: 1px solid;
overflow-x: hidden;
overflow-y: auto;
}
.page {
display: flex;
align-items: stretch;
transition: transform ease .3s;
transform: translateX(-200px);
}
.page.opened {
transform: translateX(0);
}
.menu {
flex: 0 0 auto;
width: 200px;
background: black;
color: white;
}
.content {
flex: 0 0 100%;
width: 100%;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: gray;
}
.button {
width: 30px;
height: 30px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
<header class="header">
<div class="button"></div>
<span>Header</span>
</header>
<div class="page">
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<p>Some text.</p>
<p>Horace Greeley (1811–1872) was editor of the New-York Tribune, as well as the Democratic and Liberal Republican candidate in the 1872 U.S. presidential election. Born to a poor family in New Hampshire, Greeley in 1831 went to New York City to seek his fortune. He lived there the rest of his life, but also spent much time at his farm in Chappaqua. In 1841, he founded the Tribune, which became the highest-circulating newspaper in the country. He urged the settlement of the American West, popularizing the phrase "Go West, young man, and grow up with the country", though it is uncertain if he invented it. Greeley was briefly a Whig congressman from New York, and helped found the Republican Party in 1854. When the Civil War broke out, he mostly supported President Abraham Lincoln, and urged the end of slavery. Greeley ran in 1872 in an attempt to unseat President Ulysses Grant, whose administration he deemed corrupt, but lost in a landslide. Devastated at the defeat, he died three weeks after Election Day.</p>
</div>
</div>
</div>
Related
Project Link
I'm trying to get my background image to be visible but it doesn't appear, Also my css animations don't work as well any information on how to correct this?
.bg-image {
/* The image used */
background-image: url("https://i.postimg.cc/Hn0vxz91/Bridge.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
object-fit: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
body{
background-color:#28282B;
}
/* Style the links inside the pill navigation menu */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Change the color of links on mouse-over */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
pulse a:hover{
animation: pulse 1s infinite;
animation-timing-function: linear;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1);
100% { transform: scale(1); }
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
border: 1px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
#media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
.checked {
color: orange;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: white;
}
#star{
background-color:#28282B;
}
.container{
background-color:#28282B;
}
.center {
background-color:white;
}
<header>
<title> Portfoilo</title>
<nav id="navbar">
<div class="pill-nav">
<div class="pulse">
<a class="active" href="#welcome-section">Home</a>
Projects
Certifications</nav> </div>
</div>
</header>
<main><section>
<div class="bg-image"></div>
<div class="bg-text">
<h1>I Am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</section>
<section id="welcome-section">
<h1 id="practice"> Welcome to My Practice Portfolio</h1></section>
<p>This is my practice portfolio to fune tune my skills when I am readyu to showcase my skills to the web I will link it to the actual one when it's ready and I am ready to share on the web thank you for reading this messgae.</p>
<section id="projects">
Tribute Page
Technical Documentation
</section>
<section id="Certifications">
Certifications</section>
</main>
<body>
<div class="container">
<img src="https://i.pinimg.com/originals/21/45/47/2145477174ea52cd79758af817b905b9.jpg" alt="Avatar" style="width:90px">
<p><span>Julie Jacobs.</span> CEO at Mighty Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="container">
<img src="https://www.byrdie.com/thmb/fLsxKLnkeZWgt54cWlUCw8ya1KE=/1716x1716/smart/filters:no_upscale()/Screen-Shot-2020-08-31-at-2.57.48-PM-ab7152b68d9042838d10c0ff58f8d3bf.jpg" alt="Avatar" style="width:90px">
<p><span >Rebecca Flex.</span> CEO at Company.</p>
<p>No one is better than John Doe</p>
<div id="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</body>
<footer>
<!-- Add icon library -->
<div class="card">
<img src="https://i.guim.co.uk/img/media/9bb29e1304526b5aeb6378f485f16bd5310dff9e/0_236_4500_2700/master/4500.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=b87889efa83846281e306c50ef9370db" alt="John" style="width:100%">
<h1 class="contact">John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<p><button>Contact</button></p>
</div>
</footer>
I'm trying to get my image to display while having a shade of the background color add effect to the image and I have css animations that don't work any information on how to fix all that? So they both could become visible also the card section how to make one portion of it white.
Your background image is working fine for me right now.
About the animation; You mean div class pulse right?
Put <nav> inside <body> and see if it works or not.
So I've been searching and searching for guidance in this with no avail.
Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar.
My HTML code for the sidebar is this:
<nav class="col-sm-3 ">
<div class="col-sm-12" id="fixed-sidebar">
<!-- <img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"> -->
<ul>
<li class="fuente-fjalla ul-personalizada">Animación</li>
<li class="fuente-fjalla ul-personalizada">Ilustración</li>
<li class="fuente-fjalla ul-personalizada">Interacción</li>
<br>
<li class="fuente-fjalla ul-personalizada">Blog</li>
<br>
<li class="fuente-fjalla ul-personalizada">Acerca</li>
<li class="fuente-fjalla ul-personalizada">Contacto</li>
</ul>
</div>
</nav>
My CSS:
#fixed-sidebar {
position: fixed;
max-width: 20%;
color: white;
}
I have no idea how to get that into a navbar. All I know is how to make the navbar from start, but I don't want that! I don't want any of that fancy animated-overlay-multicolor-accordion-whatever things, please-
Thank you :)
Bootstrap 5 (update 2021)
Some of the classed have change for Bootstrap 5, but the concept is still the same. Here's an updated Bootstrap 5 sidebar to navbar example
Bootstrap 4 (original answer)
It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.
Bootstrap 4 Sidebar switch to Top Navbar on mobile
<div class="container-fluid h-100">
<div class="row h-100">
<aside class="col-12 col-md-2 p-0 bg-dark">
<nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
<div class="collapse navbar-collapse">
<ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Link</a>
</li>
..
</ul>
</div>
</nav>
</aside>
<main class="col">
..
</main>
</div>
</div>
Alternate sidebar to top
Fixed sidebar to top
For the reverse (Top Navbar that becomes a Sidebar), can be done like this example
Big screen:
Small screen (Mobile)
if this is what you wanted this is code
https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview
CSS + HTML + JQUERY :
#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
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #7386D5;
color: #fff !important;
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;
color:white;
}
#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;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
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: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style2.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Header as you want </h3>
</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Animación
</li>
<li>
Ilustración
</li>
<li>
Interacción
</li>
<li>
Blog
</li>
<li>
Acerca
</li>
<li>
contacto
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
if this is what you want .
If this isn't a good solution for any reason, please let me know. It worked fine for me.
What I did is to hide the Sidebar and then make appear the navbar with breakpoints
#media screen and (max-width: 771px) {
#fixed-sidebar {
display: none;
}
#navbar-superior {
display: block !important;
}
}
Is it possible to apply same style to element 1 and element 2, without calling out the style in element 1?
Element 1 is .notch
Element 2 is #fullbg
Element 1 must always come before Element 2. I would like to apply Element 2's bg-color to Element 1 and Element 2.
How do I make the first <div class="notch">have a yellow bg (#fullbg), without applying any specific style (class/id) to <div class="notch">?
I'm thinking this could be done with :nth-of-type() selector...? Eventually, I will have several "notches", with <div id="fullbg3">, <div id="fullbg4">, etc.
Check codepen example - I want first notch to be yellow (like fullbg), and second notch to be red (like fullbg2), without giving any notch their own special class.
Currently, the first notch is red. It should be yellow.
http://codepen.io/Goatsy/pen/GqJGxb
HTML
<p>stuff</p>
<div class="notch">this should be YELLOW</div>
<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>
<p>stuff</p>
<div class="notch">this should be RED</div>
<p>stuff</p>
<div id="fullbg2">this should be RED</div>
CSS
.notch,
#fullbg {
background: yellow;
}
.notch,
#fullbg2 {
background: red;
}
Here is, more specifically what I'm trying to achieve: the bgcolor and small block color should match. codepen.io/Goatsy/pen/rLVrJo
The ~ (selects successors) partly solves the problem, though it can be not very flexible sometimes (i.e. you have to right that for every new "notch").
.notch,#fullbg{
background:yellow;
}
#fullbg~.notch,#fullbg2{
background:red;
}
#fullbg2~.notch,#fullbg3{
background:green;
}
<p>stuff</p>
<div class="notch">this should be YELLOW</div>
<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>
<p>stuff</p>
<div class="notch">this should be RED</div>
<p>stuff</p>
<div id="fullbg2">this should be RED</div>
<p>stuff</p>
<div class="notch">this should be GREEN</div>
<p>stuff</p>
<div id="fullbg3">this should be GREEN</div>
Updated based on comment/codepen sample
Here is a start
/* notch nav styles */
.notch-nav {
overflow: hidden;
background: #fff;
margin: 0;
list-style: none
}
.notch-nav li {
float: right;
margin-top: 33px;
/* adjust this line to push entire notch nav down and away from minilinks */
margin-right: -15px;
}
.notch-nav a {
display: block;
/* padding:50px 0 20px 30px; */
margin-left: 30px;
color: #cca134;
text-decoration: none;
font-size: 18px;
padding-bottom: 25px;
}
.notch-nav a:hover {
text-decoration: none;
color: #295pms;
}
.notch-nav .current .dropdown:hover .dropbtn:before,
.notch-nav .current .dropdown:hover .dropbtn:after {
display: none
}
.notch-nav .current .dropdown-content a:before,
.notch-nav .current .dropdown-content a:after {
display: none
}
.notch-nav .current a {
position: relative;
text-decoration: none;
z-index: 5;
}
.notch-nav .current a:before,
.notch-nav .current a:after {
content: "";
display: block;
width: 26px;
height: 26px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15px;
}
/* make fullwidth-header 100% */
.fullwidth-header {
display: none;
width: 100%;
height: 230px;
}
.fullwidth-header-block {
display: block;
background: #white;
padding: 30px;
margin-top: 53px;
font-size: 30px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.fullwidth-header-block p {
margin-top: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
text-transform: none;
letter-spacing: 0;
}
/* current classes */
.curr1 li:nth-child(1),
.curr1 ~ div:nth-of-type(1) {
background:blue;
display: block;
}
.curr2 li:nth-child(2),
.curr2 ~ div:nth-of-type(2) {
background:black;
display: block;
}
.curr3 li:nth-child(3),
.curr3 ~ div:nth-of-type(3) {
background:pink;
display: block;
}
.curr4 li:nth-child(4),
.curr4 ~ div:nth-of-type(4) {
background:green;
display: block;
}
<ul class="nav notch-nav curr4">
<li>
<div class="dropdown">
<a class="dropbtn" href="/utilities/about-rpu">About</a>
</div>
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="/utilities/?q=contractors">Contractors</a>
</div>
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="/utilities/?q=businesses">Businesses</a>
</div>
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="/utilities/?q=residents">Residents</a>
</div>
</li>
</ul>
<div class="fullwidth-header">
About
</div>
<div class="fullwidth-header">
Contractors
</div>
<div class="fullwidth-header">
Businesses
</div>
<div class="fullwidth-header">
Residents
</div>
I am trying to create a nav bar (boot strap) that sticks to the top once scrolled down past through it. I was able to achieve this behavior using affix plugin, but with a glitch. The nav bar is creating certain amount of right margin on scrolling down. I am unable to resolve the issue. Please help me resolve this.
This is my html code for nav bar
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#media (min-width: 768px) {
.navbar {
border-radius: 15
}
}
.navbar-toggle {
border-radius: 15
}
.navbar-toggle .icon-bar {
border-radius: 0
}
.navbar {
background: #700000;
margin-bottom: auto;
border-color: #384248;
width: 100%;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 17px;
padding-bottom: 17px;
}
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
margin: 0px;
-webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->
<!-- Nav Bar Section -->
<div id="nav-wrapper">
<div class = "row" id="nav-row">
<nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">
<div class = "container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
<!--<span class="sr-only">Toggle navigation</span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="index_hth.html">Navigation</a>
</div> <!-- end navbar-header div-->
<div class="collapse navbar-collapse" id = "myNavBar">
<ul class="nav navbar-nav" id="menu-bar">
<li>Home</li>
<li>Offers</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div> <!-- end collapse div -->
</div><!-- end container-fluid-->
</nav> <!-- end nav -->
</div>
</div>
<!-- Nav Bar Section End-->
Please look into this and help me resolve the issue. Thanks in advance.
Using the code inspector I found that #nav-wrapper .row#nav-row has a negative margin set.
The rule of specificity and margin: 0 fixes the issue
#nav-wrapper .row#nav-row {
margin: 0;
}
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
#nav-wrapper .row#nav-row {
margin: 0;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#media (min-width: 768px) {
.navbar {
border-radius: 15
}
}
.navbar-toggle {
border-radius: 15
}
.navbar-toggle .icon-bar {
border-radius: 0
}
.navbar {
background: #700000;
margin-bottom: auto;
border-color: #384248;
width: 100%;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 17px;
padding-bottom: 17px;
}
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
margin: 0px;
-webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->
<!-- Nav Bar Section -->
<div id="nav-wrapper">
<div class = "row" id="nav-row">
<nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">
<div class = "container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
<!--<span class="sr-only">Toggle navigation</span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="index_hth.html">Navigation</a>
</div> <!-- end navbar-header div-->
<div class="collapse navbar-collapse" id = "myNavBar">
<ul class="nav navbar-nav" id="menu-bar">
<li>Home</li>
<li>Offers</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div> <!-- end collapse div -->
</div><!-- end container-fluid-->
</nav> <!-- end nav -->
</div>
</div>
<!-- Nav Bar Section End-->
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}