I am trying to get my carousel to work however after I changed the size of it all it breaks the carousel itself and I am not exactly sure. Any help would be great as I am very new to responsive designs. I'm not really sure how this all works but my placeholder images do scale to the size of the device well. So I am just not sure why the carousel is no longer working.
Thanks in advance all!
/*Main*/
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: lightgreen;
}
/*NavBar*/
#logo-space{
width: auto;
height: auto;
background-color: #0f2471;
}
#logo-space img{
width: auto;
height: auto;
position: relative;
left: 2rem;
}
.nav-bar{
background-color: #16377e;
position: relative;
}
#navbar-space .nav-link{
position: relative;
left: 4rem;
}
/*Carousel*/
.home .carousel-item{
min-height: 100vh;
background-position: center;
background-size: cover;
position: relative;
z-index: 1;
}
.home .carousel-item:before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
.home .carousel-item.active h2{
animation: fadeInLeft 0.5s ease forwards;
}
.home .carousel-item.active p{
animation: fadeInRight 0.5s ease forwards;
}
/*responsive*/
#media(max-width: 767px){
.home .carousel-control-next,
.home .carousel-control-prev{
display: none;
}
.home .carousel-indicators li{
height: 60px;
width: 60px;
}
.home .carousel-item h2{
font-size: 45px;
}
.home .carousel-item p{
font-size: 22px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<!--Logo Space-->
<div id="logo-space">
<div class="row">
<div class="col">
<img src="img/logo.png" class="image-fluid" alt="">
</div>
</div>
</div>
<!--Nav Bar-->
<div id="home">
<nav id="navbar-space" class="navbar navbar-expand-lg nav-bar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#divisions">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#appeals">APPEALS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Carousel-->
<section id="carouselSection" class="home carousel slide position-absolute" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
</section>
</body>
</html>
Related
The toggle button used in my html code is not working. I tried to design with bootstrap. I'm new to bootstrap. I gave my index.html file and main.js file. I have no idea where my mistake is. Since I am a beginner, it is very helpful to have your help. Thanks in advance to everyone.
My index.html file:
<!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">
<title>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
<!-- Demo content -->
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
<div class="separator"></div>
<div class="row text-black">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- End demo content -->
</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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
My main.js file:
$(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});
My style.css file
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;
}
/* Side Bar */
.wrapper {
display: flex;
text-decoration: none;
transition: all 0.3s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 0rem;
transition: all 0.4s;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .active {
background-color: #e2694b;
}
.components li .active {
background-color: #261313;
}
#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: #7385D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapase"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar img {
width: 30%;
}
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar .active {
margin-left: 0px;
}
#sidebarCollapase span {
display: none;
}
}
function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
<!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">
<title>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
</div>
</div>
</div>
</div>
</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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
I'm new to the laravel environment. I've been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.
Here are my files:
Layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
<!--Bootstrap, Jquery, Pooper, FontAwesome-->
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">
<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>
<link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
<script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
<!--/Bootstrap, Jquery, Pooper, FontAwesome-->
<style>
.dropdown-toggle::after {
content: none;
}
</style>
</head>
<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
#include('shared.navbar')
#include('shared.sidebar')
</header>
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
#yield('content')
</main>
<!--/.Content-->
<!--Scripts-->
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
</script>
<!--/.Scripts-->
#include('shared.modal-crear')
#include('shared.modal-editar')
<!--Plugins-->
<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
<!--/.Plugins-->
</body>
</html>
navbar.blade.php
<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
<!-- SideNav slide-out button -->
<div class="float-left pl-2">
<a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
<i class="fa fa-bars" aria-hidden="true"></i></button></a>
</div>
</hr>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto px-4">
<a href="/">
<strong id="nav-title">Dimiforms</strong>
</a>
</div>
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item dropdown">
<a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-haspopup="true" aria-expanded="false">
#yield('User-name', 'Default') | Usuario
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Mi cuenta</a>
<a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
Sidebar.blade.php
<div class="sidebar float-left" id="sidebar">
×
<div class="text-center">
<img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
<h6>#yield('User-name')</h6>
</div>
<hr>
<div class="items-container">
<a href="cuenta" >
<h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i> | Cuenta</h6>
</a>
<a href="formularios">
<h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i> | Formularios</h6>
</a>
<a href="estadisticas">
<h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i> | Estadisticas</h6>
</a>
<a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
<h6 class="menu-item"><i class="fas fa-laptop-code"></i> | Dimiforms</h6>
<div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
</div>
</div>
</a>
<hr>
<a href="about">
<h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i> | Acerca de</h6>
</a>
</div>
styles.css
/*general stuff*/
a {
text-decoration: none !important;
}
/*sidebar*/
#sidebar {
height: 100%;
width: 0;
z-index: -inherit;
position: fixed;
left: 0;
background-color: #2c3e50;
padding: 60px 0 0 0;
top: 55px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 1s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar h6 {
color: rgb(255, 255, 255);
margin-top: 7px;
}
.sidebar a{
padding: 4px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.8s;
background-color: inherit !important;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: #c36618 !important;
}
.items-container{
text-decoration: none;
color: white;
}
.menu-item, .dropdown-item{
padding: 6px 0 10px 20px;
transition: 0.8s;
cursor: pointer;
}
.menu-item:hover{
background-color: white;
color:#2c3e50;
}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50px 50px 50px 50px;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
/*sidebar*/
/*navbar*/
#navbar {
background-color: #c36618;
border: none !important;
height: 60px;
}
#sidebarCollapse{
background-color: transparent;
color: #fafafa;
}
#sidebarCollapse:hover {
background-color: white;
color: #c36618;
}
#nav-title, #nav-dropdown{
color: #ffffff;
}
/*main*/
main{
padding: 0 0 0 25%;
transition: margin-left 1s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/* Dropdowns */
.dropdown-item{
display: block;
transition: 0.8s;
color: #2c3e50 !important;
background-color: transparent !important;
}
.dropdown-item:hover{
color:#c36618 !important;
}
.dropdown{
width: inherit;
background-color: inherit !important;
border: 0px;
}
/* Modals */
.submit-button{
background-color: #2c3e50;
color:white;
border-radius: 8px;
}
I fixed it by changing the order of the bootstrap, Jquery and main css files.
I had two bootstrap files imported as well.
I have used bootstrap to create the navbar and i want to add some extra effect on it.
I want to make a sticky navbar with bootstrap, with the effect of adding a red underline for each <a> tag. But when I scroll down, the red underline effect is disabled and the navbar and the numbers overlapped.... Can anyone tell me why?
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>
Your .navbar-scroll's background-color has a transparency value of 0.7, which makes the content shine through it when you scroll down. Just change the background-color to white or the transparency value to 1 (background-color: rgba(255,255,255,1)).
Concerning the red underlines on the nav links: They do appear on hover (?)
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,1);
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>
Update my-navbar class css
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
I need some help because I can't find a way to customize the way bootstrap cards are displayed on the screen.
For example, when the screen width is 860 I would like for it to only load 2 cards instead of 3 and when the width is like 600 it to load 2 but smaller so they fit in the same row! Is there any way I can achieve this result?
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 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>
</html>
The idea is that you define a row and inside it, you define your cols.
Imagine each row to be divided into 12 sections. You then assign on each col how many of these sections you want it to cover, on each screen size category.
Thus if you want on small screens to have 2 cards per row and on bigger screens 3 per row, you set col-6 col-md-4, this means on Extra small screens (smaller than 576px) cover 6 out of 12 (1/2), while on small screens or bigger (greater or equal to 576px) cover 4 out of 12 (1/3).
Example code:
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">
Card 1
</div>
<div class="col-6 col-sm-4">
Card 2
</div>
<div class="col-6 col-sm-4">
Card 3
</div>
<div class="col-6 col-sm-4">
Card 4
</div>
<div class="col-6 col-sm-4">
Card 5
</div>
<div class="col-6 col-sm-4">
Card 6
</div>
</div>
</div>
Based on your code
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 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>
</html>
I'm building a website with C9 and whenever I try and run the webpage and visit it, it simply freezes and stops loading. It loads in the bootstrap and I don't think it's loading in the ../css/hub.css
$(function() {
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
});
$(function() {
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
})
$(function() {
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Hub</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Custom styling -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/hub.css" type="text/css" />
<link rel="stylesheet" href="../partials/nav.css" type="text/css" />
<link rel="stylesheet" href="../css/components.css" type="text/css" />
<!-- Imported Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>
<body>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="venos_logo.png">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/hub.js"></script>
</body>
</html>
Here's the link to the webpage to see if it does the same thing for you:
https://venos-git-jasonprocka1.c9users.io/www/html/hub.html
I've already worked on clearing cookies and nothing seems to work. Something has to be wrong with my code.
Any help is greatly appreciated! Thanks!
On the page linked, you have not included the required tether.js library.
Also, the page is requesting a wallpaper image over http (but the page itself is hosted on https, usually you get a warning on the browser's console about this)
And, it's making references to a nav.css file but it cannot find it.
As a side note, you do not need to have each event handler declared in its own function() declaration. You could combined them all in one as below:
$(function() {
// five-column click
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// close-detail click
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// nav-custom touchmove
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
// content touchmove
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
// inner-nav touchmove
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
// window resize
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="http://lorempixel.com/50/50">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>