Angular Data binding issue when viewing localhost - javascript

So, I am currently having a data binding angular issue as I am using MEAN Stack and have everything running properly with my DB being connected. I have correctly added JSON entries, it’s just that they will not appear when viewing from my localhost.
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
var refresh = function(){
$http.get('/eventlist/').then(function(response) {
console.log("I got the data I requested");
$scope.eventlist = response.data;
$scope.event = null;
});
};
refresh();
$scope.addEvent = function () {
console.log($scope.event);
$http.post('/eventlist/', $scope.event).then(function(response){
console.log(response);
refresh();
});
$scope.update = function() {
console.log($scope.event._id);
$http.put('/eventlist/' + $scope.event._id, $scope.event).then(function(response) {
refresh();
})
};
};
$scope.remove = function(id) {
console.log(id);
$http.delete('/eventlist/' + id).then(function(response) {
refresh();
});
};
$scope.edit = function(id) {
console.log(id);
$http.get('/eventlist/' + id).then(function(response) {
$scope.event = response;
});
};
$scope.deselect = function() {
$scope.event = null;
refresh();
};
}]);
body {
position: relative;
overflow-x: hidden;
background-color: #00ffea;
}
body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: transparent;
}
paper-dialog.size-position {
position: fixed;
top: 16px;
right: 16px;
width: 300px;
height: 300px;
overflow: auto;
}
.indent{
margin-left: 25px;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
/*.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}*/
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/page.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Summer Event Mapping</title>
<meta name="description" content="Carnival and Event Mapping tool">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
FILTERS
</a>
</li>
<li>
Enter Zip Code
</li>
<li>
<input type="text" class="indent"/>
</li>
<li>
Festivals
</li>
<li>
Carnivals
</li>
<li>
Other Events
</li>
<li>
<button class="indent">Apply Filters</button>
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container" ng-controller="AppCtrl">
<h1 class="text-center">Summer Event List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Price</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in eventlist">
<td>{{event.name}}</td>
<td>{{event.startDate}}</td>
<td>{{event.endDate}}</td>
<td>{{event.price}}</td>
<td>{{event.location}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="controllers/controller.js" charset="utf-8"></script>
</div>
<!-- /#page-content-wrapper -->
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
</body>
</html>
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('eventlist', ['eventlist']);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/eventlist', function(req, res) {
console.log("i received a get request")
db.eventlist.find(function(err, docs) {
console.log(docs);
res.json(docs);
});
});
app.post('/eventlist', function(req, res) {
console.log(req.body);
db.eventlist.insert(req.body, function(err, doc) {
res.json(doc);
});
});
app.delete('/eventlist/:id', function(req, res) {
var id = req.params.id;
console.log(id);
db.eventlist.remove({
_id: mongojs.ObjectID(id)
}, function(err, doc) {
res.json(doc);
});
});
app.get('/eventlist/:id', function(req, res) {
var id = req.params.id;
console.log(id);
db.eventlist.findOne({
_id: mongojs.ObjectId(id)
}, function(err, doc) {
res.json(doc);
});
});
app.put('/eventlist/:id', function(req, res) {
var id = req.params.id;
console.log(req.body.name);
db.eventlist.findAndModify({
query: {
_id: mongojs.ObjectId(id)
},
update: {
$set: {
name: req.body.name,
startDate: req.body.startDate,
price: req.body.price,
location: req.body.location
}
},
new: true
}, function(err, doc) {
res.json(doc);
});
});
app.listen(4000);
console.log("Server running on port 4000");

Related

Why ajax loaded content is not showing properly?

I am trying to show products of a particular category when it is clicked by using jquery ajax i.e without reloading the page.
Now when the products load with Ajax it seems that their CSS is disturbed or maybe some jQuery events not loading. I have checked, all the CSS classes are well placed as in original file and also i ave tried the ".on" method as suggested in some other answers but it doesn't do anything. can you please help me find what the problem is?
original look :
this is what the look should be like
After Ajax loaded content :
and this look is after the ajax loading
all_products.php (original file)
<div class="product_grid">
<div class="product_grid_border"></div>
<div id="prod_container">
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
</div>
</div>
ajax_products.blade.php (to be added via ajax)
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
my_js.js
$(document).on('click','.cat',function(){
$.ajax({
url: 'http://localhost/cart_test/user/get_cats',
type: 'POST',
data: { cat : $(this).attr('id')},
success: function(data){
d = JSON.parse(data);
var container = $('#prod_container');
container.empty();
container.append(d);
},
error: function()
{
alert('error');
}
});
});
frontController.php
public function get_cats(Request $request)
{
$id = $request->input('cat');
$products = product::where('category_id','=',$id)->get();
$prods = view('frontend.modules.ajax_products',compact('products'))->render();
echo json_encode($prods);
}
shop.css
.product_grid
{
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
width: calc(100% + 40px);
}
.product_grid_border
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 3px;
height: 100%;
background: #FFFFFF;
z-index: 1;
}
.product_item
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 20%;
background: #FFFFFF;
cursor: pointer;
padding-top: 40px;
padding-bottom: 24px;
text-align: center;
}
.product_border
{
display: block;
position: absolute;
top: 52px;
right: 1px;
width: 1px;
height: calc(100% - 71px);
background: #e5e5e5;
}
.product_image
{
width: 100%;
height: 115px;
}
.product_image img
{
display: block;
position: relative;
max-width: 100%;
}
.product_content
{
width: 100%;
}
.product_price
{
font-size: 16px;
font-weight: 500;
margin-top: 25px;
}
.product_item.discount
{
color: #df3b3b;
}
.product_price span
{
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.6);
margin-left: 10px;
}
.product_price span::after
{
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: '';
}
.product_name
{
margin-top: 4px;
overflow: hidden;
}
.product_name div
{
width: 100%;
}
.product_name div a
{
font-size: 14px;
font-weight: 400;
color: #000000;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_name div a:hover
{
color: #0e8ce4;
}
.product_fav
{
position: absolute;
top: 33px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav:hover
{
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav.active i
{
color: red;
}
.product_item:hover .product_fav
{
visibility: visible;
opacity: 1;
}
.product_marks
{
display: block;
position: absolute;
top: 33px;
left: 24px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_mark
{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.product_new
{
display: none;
background: #0e8ce4;
visibility: hidden;
opacity: 0;
}
.product_discount
{
display: none;
background: #df3b3b;
visibility: hidden;
opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
display: inline-block;
visibility: visible;
opacity: 1;
}
shop.js (this is also not working after ajax)
function initIsotope() {
var sortingButtons = $('.shop_sorting_button');
$('.product_grid').isotope({
itemSelector: '.product_item',
getSortData: {
price: function(itemElement) {
var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
return parseFloat(priceEle);
},
name: '.product_name div a'
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// Sort based on the value from the sorting_type dropdown
sortingButtons.each(function() {
$(this).on('click', function() {
$('.sorting_text').text($(this).text());
var option = $(this).attr('data-isotope-option');
option = JSON.parse(option);
$('.product_grid').isotope(option);
});
});
}
/*
8. Init Price Slider
*/
function initPriceSlider() {
if ($("#slider-range").length) {
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 580],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').on('mouseup', function() {
$('.product_grid').isotope({
filter: function() {
var priceRange = $('#amount').val();
var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');
return (itemPrice > priceMin) && (itemPrice < priceMax);
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
}
}

Removing class if screen is small than #px for sidebar?

Issue: When the screen is under 992px, the sidebar removes class, but this only happens if the screen is shrunk manually - not depending on the starting screen size.
How can i make it so if the screen is under 992px, the sidebar is not toggled unless clicked?
My javascript:
$(function(){
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(function(e) {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
});
});
View:
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a class="nav-link" href="/shouts">
<p>User</p>
</a>
</li>
<li>
<a class="nav-link" href="/seller">
<p>This</p>
</a>
</li>
<li>
<a class="nav-link" href="/analytics">
<p>Analytics</p>
</a>
</li>
</ul>
</div>
<div id="main">
...
<div id="page-content-wrapper">
...
</div>
<%= yield %>
</div>
</div>
</div>
I have tried this and it didn't work:
function checkWidthAndToggle() {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
}
$(window).on('resize load', checkWidthAndToggle);
CSS:
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
padding-top: 55px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: rgba(255, 0, 0, .79) ;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-left: 0px;
}
// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center {
// display: block;
// text-align:center;
// float: none;
// vertical-align: top;
// }
#navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: white;
text-align: center;
}
.nav-color {
background: rgba(1, 0, 0, .79) ;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #fff;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-left: 0;
}
}
#media only screen and (max-width: 830px) {
.nav-remove-1 {
display: none;
}
}
#media only screen and (min-width: 830px) {
.side-show-1 {
display: none;
}
}
#media (max-width: 543px) {
.navbar-toggleable .navbar-nav .nav-item {
margin-right: 0;
}
}
#media (max-width: 767px) {
.navbar-toggleable-sm .navbar-nav .nav-item {
margin-right: 0;
}
}
#media (max-width: 991px) {
.navbar-toggleable-md .navbar-nav .nav-item {
margin-right: 0;
}
}
.center-just {
justify-content: center;
}
What's the correct code so when a screen is under 992px, the sidebar is closed on page load?

I don't really like this but it works.
You assigned a resize event, but actually you need to call the method onload to check actual size.
This does not explain why you media query is not working.
$(function(){
function checkWidthAndToggle() {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
}
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(checkWidthAndToggle);
// NOTE: We call it once to check during load.
checkWidthAndToggle();
});
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
padding-top: 55px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: rgba(255, 0, 0, .79) ;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-left: 0px;
}
// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center {
// display: block;
// text-align:center;
// float: none;
// vertical-align: top;
// }
#navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: white;
text-align: center;
}
.nav-color {
background: rgba(1, 0, 0, .79) ;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #fff;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a class="nav-link" href="/shouts">
<p>User</p>
</a>
</li>
<li>
<a class="nav-link" href="/seller">
<p>This</p>
</a>
</li>
<li>
<a class="nav-link" href="/analytics">
<p>Analytics</p>
</a>
</li>
</ul>
</div>
<div id="main">
...
<div id="page-content-wrapper">
...
</div>
<%= yield %>
</div>
</div>
</div>

Trying to create a small website, new to html. Having trouble with div's

I just started working with html and download what I thought it was a simple template. Now I have been trying to add drop down menu and add 2 items to the right corresponding to register/login. I tried creating new divs, ul's... But it never seems to line up or items go missing.
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu>ul>li {
float: left;
}
#cssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#cssmenu.align-right>ul>li {
float: right;
}
#cssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
color: #ffffff;
}
#cssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
background: #47c9af;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#logincssmenu:after,
#logincssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#logincssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#logincssmenu ul {
background: #ffffff;
}
#logincssmenu>ul>li {
float: right;
}
#logincssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#logincssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#logincssmenu.align-right>ul>li {
float: right;
}
#logincssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#logincssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
color: #ffffff;
}
#logincssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
background: #47c9af;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #47c9af;
display: block;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: rotateX(2deg);
transform-origin: bottom;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/loginstyle.css">
<link rel="stylesheet" href="css/dropdownstyle.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<ul>
<li><a href='#'>Login</a></li>
</ul>
</div>
</ul>
</div>
</body>
<html>
I also tried to mimic the style of the dropdown button by copy pasting some of the code from the original styles.css but with no good results. I started only a few days ago but I don't get why sometimes it disappears and disalligns.
Here is the original template. http://cssmenumaker.com/menu/flat-tabbed-menu

Put this in the first .I think this should do it.
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<li><a href='#'>Login</a></li>
</div>
Advice:If you are new to html&css,try to make some easy tutorials.Don't download a template beacuse you will not understand what's going on.

Javascript onclick menu button show sidebar, onmouseleave hide sidebar

I have a sidebar which is hidden by default and a menu button which trigger the sidebar. So far, everything is working but what I want is, when I click on the menu, the sidebar gets opened and on mouse leave, the sidebar gets closed.
I have checked other solutions and tried to implement it in my code but its not working.
Here are my html and js
//html
<div id="wrapper">
<!-- sidebar content -->
<!-- Menu button -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
</div>
//js
<script type="text/javascript">
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
Thanks

In order to close the menu on mouseleave you may write:
$('.navbar').on('mouseleave', function (e) {
trigger.click(); // simulate the action you now do to close the menu
})
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
$('.navbar').on('mouseleave', function (e) {
trigger.click();
})
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #fff;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #999;
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(2):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(3):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(4):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(5):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(7):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(8):before {
background-color: #52b6ec;
}
.sidebar-nav li:nth-child(9):before {
background-color: #52b6ec;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #999;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #f1f1f1;
box-shadow: none;
}
.hamburger {
position: fixed;
top: 100px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 2px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<!-- Sidebar -->
<nav class="navbar navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav navbar-nav sidebar-nav">
<div class="gap"><br><br><br></div>
<li>
Services
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:#777;">Works <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Testimonials
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
</div>

Can't override bootstrap .navbar

I overrided .navbar from bootstrap like this :
.navbar {
margin-bottom: 0px !important;}
It works well for some times, but because of an error I had to rewrite my css file entirely which is now like this :
.navbar {
margin-bottom: 0px !important;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background-color: #f5f5f5;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 0px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: 0;
}
}
I took all of the template except .footer and .navbar on a website. As I said, it was like this before and everything worked fine.
The only portion of code where I use the navbar class is this one :
{% block header %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<div class="navbar-brand-name">
<img alt="logo" width="80%" height="80%" src="bundles/exportail/images/logo.png" />
</div>
</a>
<p class="navbar-text"> Connected as : {{ app.user.username }}
-
Disconnected
</p>
</div>
</div>
</nav>
{% endblock %}
When I examine this div with the google inspection tools, it presents me the margin at 20px (default value) even if I had already overrode the value in my .css.
I called my .css like this :
{% block stylesheets %}
<link href="bundles/exportail/css/pagelayoutonline.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}
I already did some search and the net and I did not find anything really helpful ... If you have any clue, I will appreciate it !

Categories

Resources