<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> ARPIT - Accounting & Reconciliation Portal of Indirect Taxes </title>
<!-- Fonts -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
#*<link href="~/Content/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />*#
<!-- Custom CSS -->
<link href="~/Content/theme/assets/admin/css/custom_website.css" rel="stylesheet" />
<!-- Bootstrap Core CSS -->
<link href="~/Content/theme/assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="~/Content/theme/assets/global/plugins/html5shiv.js"></script>
<script src="~/Content/theme/assets/global/plugins/respond.min.js"></script>
<![endif]-->
</head>
<body id="content">
<div class="page-wrap ">
<header id="header" style="min-height: 163px;">
<div class="header-body" style="top: 0px;">
<div class="header-top">
<div class=" container-xl container">
<div class="top-responsive-menu">
<div class="top-menu-area">
<ul class=" nav navbar-nav top-menu-4">
<li class="login">
<i class="fa fa-user"></i> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resLoginMenu
</li>
</ul>
</div>
<div class="top-menu-area ">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resColorThemeMenu <i class="fa fa-caret-down top -menu-3"></i>
<ul class=" nav navbar-nav top-menu menu-3 ">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<img src="~/Images/multicolor.png" style="width:25px" title="Color Theme" alt="Color Theme">
</a>
<ul class="dropdown-menu multicolors-name">
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resGreenThemeMenu</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resBlueThemeMenu</li>
</ul>
</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resWhiteThemeMenu</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resBlackThemeMenu</li>
</ul>
</div>
<div class="top-menu-area">
<ul class=" nav navbar-nav top-menu-2 ">
<li class="language menu-2" title="हिन्दी">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resLanguageMenu</li>
</ul>
</div>
<div class="top-menu-area">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resZoomMenu <i class="fa fa-caret-down"></i>
<ul class=" nav navbar-nav top-menu menu-1 top-menu-1">
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resIncreaseFontMenu </li>
<li><a class="zoom" href="#" title="Reset Font Size" style="padding: 6px 14px 6px 3px;" onclick=resetFont()>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resResetFontMenu</a></li>
<li style="margin-right:20px"><a class="zoom " href="#" title="Decrease Font Size" onclick=decreaseFont() style=" padding: 6px 14px 6px 3px;"> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDecreaseFontMenu </a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<!-- <p class="welcome-msg">DEFAULT WELCOME MSG!</p> -->
</div>
</div>
<div class="header-container container container-xl">
<div class="header-row">
<div class="header-column">
<div class="header-logo">
<a href="#Url.Action("Index", "HomePage", null)">
<img alt="ARPIT" class="logo" src="~/images/arpit_logo.png" title="Accounting & Reconciliation Portal of Indirect Taxes">
</a>
</div>
</div>
<div class="header-column">
<div class="header-logo govt-authorities-name">
<img alt="CCA & CBEC" title="CCA & CBIC" height="76" src="~/Images/govt-authorities.png">
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed -top header-container header-nav" role="navigation">
<div class="container container-xl responsive-padding-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-pills responsive-nav navigation">
<li class="menuSelect" id="Index">
<a href="#Url.Action("Index", "HomePage", null)" title="Home">
#CGA.CPSMS.BusinessModels.ResourceFiles.CAS_Resource.Home
</a>
</li>
<li class="dropdown-submenu menuSelec t" id="AboutUs">
<a href="#" title="About Us" class="dropdown-toggle " data-toggle="dropdown">
#CGA.CPSMS.BusinessModels.ResourceFiles.CAS_Resource.AboutUs <b class="caret"></b>
</a>
<ul class="about-dropdown-menu dropdown-menu ">
<li id="Overview">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resOverviewMenu </li>
<li id="OrganisationChart">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resOrganisationChartMenu</li>
<li id="OrganisationFunctions">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAboutUsOrganisationFunctionMenu</li>
<li id="DirectoryofOfficers">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAboutUsDirectoryofOfficersMenu</li>
</ul>
</li>
<li class="menuSelect" id="Administration">
<a href="#Url.Action("Administration", "StaticPage", null)" title="Administration">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAdministrationMenu
</a>
</li>
<li class="menuSelect" id="PAO">
<a href="#Url.Action("PAO", "StaticPage", null)" title="PAO">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resPAOMenu
</a>
</li>
<li class="menuSelect" id="DDODirectory">
<a href="#Url.Action("DDODirectory", "StaticPage", null)" title="DDO Directory">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDDODirectoryMenu
</a>
</li>
<li class="menuSelect" id="ListofAuthorisedBanks">
<a href="#Url.Action("ListofAuthorisedBanks", "StaticPage", null)" title="List of Authorised Banks">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resListofAuthorisedBanksMenu
</a>
</li>
<li class="menuSelect" id="Publication">
<a href="#Url.Action("Publication", "StaticPage", null)" title="Publication">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resPublicationMenu
</a>
</li>
<li class="menuSelect" id="Tender">
<a href="#Url.Action("Tender", "StaticPage", null)" title="Tender">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resTenderMenu
</a>
</li>
<li class="menuSelect" id="ContactUs">
<a href="#Url.Action("ContactUs", "StaticPage", null)" title="Contact Us">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resContactUsMenu
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</header>
#RenderBody()
</div>
<footer id="footer">
<div class="footer-link">
<div class="container container-xl">
<div class="bottomNav">
<nav>
<ul class=" bottomnavControls social-icons">
<li class="footer-image"><i class="fa fa-sitemap footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resSitemapMenu </li>
<li class="footer-image"><i class="fa fa-comments footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resFeedbackMenu </li>
<li class="footer-image"><i class="fa fa-question-circle-o footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resFAQMenu </li>
<li class="footer-image"><i class="fa fa-users footer-icon"></i> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resRTIMenu </li>
<li class="footer-image"><i class="fa fa-exclamation-triangle footer-icon "></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDisclaimerMenu </li>
<li class="footer-image"><i class="fa fa-pencil footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resTermsofUseMenu </li>
<li class="footer-image"><i class="fa fa-wheelchair footer-icon "></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAccessibilityStatementMenu </li>
<li class="footer-image"><i class="fa fa-file-text-o footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resWebsitePoliciesMenu</li>
</ul>
</nav>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<p class="copyright-text" title="© Content Owned, Updated & Maintained by O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India">© Content Owned, Updated & Maintained by </p>
<p class="copyright-text" title=" © Content Owned, Updated & Maintained by O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India">O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India</p>
</div>
</div>
</div>
</footer>
<!-------------------------------------------Middle Content FINISH---------------------------->
<!-- javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="~/Scripts/elmenu.js"></script>
#*<script src="~/Scripts/bootstrap.min.js"></script>*#
<script src="~/Content/theme/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$(this).bind("contextmenu", function (e) {
e.preventDefault();
});
});
function disableBackButton() {
window.history.forward()
}
function noBack() {
disableBackButton();
window.onload = disableBackButton();
window.onpageshow = function (evt) { if (evt.persisted) disableBackButton() }
window.onunload = function () { void (0) }
}
</script>
<script type="text/javascript">
history.pushState(null, null, ' ');
window.addEventListener('popstate', function (event) {
history.pushState(null, null, ' ');
});
</script>
<script>
$(function () {
$('.pop').on('click', function () {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
<script>
//Code start for Menue activation
$(document).ready(function () {
if (('Overview,OrganisationChart,OrganisationFunctions,DirectoryofOfficers').indexOf('#ViewBag.Title') >= 0) {
$('#AboutUs').addClass('active');
$('#' + '#ViewBag.Title').addClass('active');
} else {
$('#' + '#ViewBag.Title').addClass('active');
}
});
//Code end for Menue activation
</script>
<script type="text/javascript">
var section;
var factor = 0.8;
function getFontSize(el) {
var fs = $(el).css('font-size');
if (!el.originalFontSize) el.originalFontSize = fs; //set dynamic property for later reset
return parseFloat(fs);
}
function setFontSize(fact) {
if (section == null)
section = $('#content').find('*')
.filter(
function () {
return $(this).clone()
.children()
.remove()
.end()
.text().trim().length > 0;
}); //filter -> exclude all elements without text
section.each(function () {
var newsize = fact ? getFontSize(this) * fact : this.originalFontSize;
if (newsize) $(this).css('font-size', newsize);
});
}
function resetFont() {
setFontSize();
}
function increaseFont() {
setFontSize(1 / factor);
}
function decreaseFont() {
setFontSize(factor);
}
</script>
</body>
<style>
.page-wrap:after {
content: "";
display: block;
}
#footer, .page-wrap:after {
height: 103px;
}
</style>
</html>
when I check on the w3 validation. Below error is coming:-
Stray end tag “head”.
From line 30, column 1 to line 30, column 7
Code Extract:
dif]-->↩ ↩↩↩↩
Cannot recover after last error. Any further errors will be ignored.
From line 32, column 1 to line 32, column 19
Code Extract:
↩↩↩
How this will resolve. I am not able to understand. You can also check by
https://validator.w3.org/nu/#textarea . Same error will show.
Related
I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.
User Profile Icon Screenshot
Here is a codepen and snippet of what I currently
Codepen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-
snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css"
integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+"
crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#sidebar-
wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle
navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search"></i>
</li>
<li class="nav-item rounded-icon">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b
class="caret"></b></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<i class="fas fa-chevron-circle-left"></i>
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
.....
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<a href="mailto:info#colyar.com?subject=Website Test"><i class="fas fa-envelope-
open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() :
d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months =
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+'
'+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
</body>
</html>
Hopefully this is enough to help with what I'm trying to do.
You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.
https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns
Here is some sample code to get you started with.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="info-header">Profile</div>
<div class="user-email">richard.belding#bayside-hs.com</div>
<button class="btn btn-primary>Logout</button
</div>
</div>
The navbar works properly in full screen, but when i make the window small the toggle options doesn´t show correctly.
Was wondering if anyone knew how to fix it.
here is the css of the navbar
.navbar {
border-radius: 0;
}
.navbar-new {
background-color: white;
height: 120px;
padding-left: 20px;
}
.navbar-new .navbar-brand,
.navbar-new .navbar-brand:hover,
.navbar-new .navbar-brand:focus {
color: #FFF;
}
.navbar-new .navbar-nav > li > a {
color: #FFF;
}
.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-nav > .active > a,
.navbar-new .navbar-nav > .active > a:hover,
.navbar-new .navbar-nav > .active > a:focus {
color: #FFF;
background-color: #fcf8e3;
}
.navbar-new .navbar-text {
color: black;
}
.navbar-new .navbar-toggle {
border-color: #0FA6A1;
}
.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}`enter code here`
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}
And Here is the 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>IMC chile</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/index.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-new navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:black;" href="index.html"><img class="img-responsive" width="100%;" max-height="100px;" src="img/logo/logosmall.jpg" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="nav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" style="color:black;" aria-haspopup="true" aria-expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<b>Contacto</b>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<!-- carousel -->
<header>
</header>
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- IMC secciones -->
<div class="container" id="nuestrosclientes">
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<hr>
<h1><b>Nuestros clientes</b></h1>
<hr>
<!-- Title -->
<div class="container">
<ul class="bxslider">
<li><img src="img/clientes/14.jpg" /></li>
<li><img src="img/clientes/15.jpg" /></li>
<li><img src="img/clientes/16.jpg" /></li>
<li><img src="img/clientes/17.jpg" /></li>
<li><img src="img/clientes/18.jpg" /></li>
</ul>
</div>
<!-- /.row -->
</div>
<!-- FOOTER -->
<footer class="footer-distributed">
<div class="footer-left">
<div class="container">
<img class="img-responsive" src="img/logo/logosmall.jpg" alt="">
<br>
<p class="footer-company-name"> IMC chile © 2016</p>
</div>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p style="color:black;"><span>La Senda de Don Juan Francisco 5300,</span> Peñalolén, Santiago.</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p style="color:black;">+56 9 5688 6169</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p style="color:black;">ventas#imcchile.cl</p>
</div>
</div>
<div class="footer-right">
<p style="color:black;" class="footer-company-about">
<span style="color:black;">Sobre la compañia</span>
Comercializadora Importadora y Exportadora IMC Chile Limitada. <br>Rut: 76.296.444-9.
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-github"></i>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- carousel script -->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 600,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
speed: 1000
});
});
</script>
</body>
</html>
Hello try the below Html for navbar I just edited some classes for bootstrap and it seems working .Hope It helps you.
"Just ignore the code see the fiddle below" .
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#"
role="button" style="color:black;" aria-haspopup="true" aria-
expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext
</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<a href="#" style="color:black;">
<b>Contacto</b></a>
</li>
</ul>
</div>
See the below Fiddle
Side Bar Fiddle
Well, if you add, for example, background-color: #fff to nav with the class "navbar ", you will have the desired result - a text with a color behind. But I think the problem is that you've overridden some bootstrap classes or missed adding one to your html code. Moreover your next problem (after background-color) will be fixing the position of the navbar, so it would be nicely viewable on mobile devices. Try to read this part of bootstrap documentation for more information.
I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:
However, the result I get is this one:
This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
<nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/>
</li>
<li>
<i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/>
</li>
</ul>
</div>
</nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>
<div>
my page content
</div>
<script>
function test() {
alert("TEST");
}
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout
Bootstrap Dashboard
This Bootstrap Dashboard example showcases how to achieve a three component page.
Top Navigation Bar
Sidebar Navigation Menu
Content Area
The Top Navigation bar is a root component inside your <body>. The Sidebar and Content Area are <div class="col-xs-*"> columns located inside a <div class="row"> row which resides in a <div class="container-fluid"> container.
Visit the link above and view-source to see the structure of the HTML. Fundamentally this is a CSS problem, as your current GitHub project contains all of the elements, they are just positioned behind each other out of view. Adding the appropriate Bootstrap classes will resolve the problem.
The Thymeleaf fragments are being included properly.
The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
</div>
The side menu:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
Then you have to create the layout page:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
I have multilevel vertical menu,when i try to go to second level ,second level menu disappears.(some old versions of browsers it works fine )
and the height of second level menu is also not equal to first level.i want to something like that
I have pasted my exisiting code on
http://codepen.io/anon/pen/Mwwdqd
though code is not working on codepen,you can copy the html,css in separate files.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<html lang="en">
<body>
<div id="wrapper">
<div class="main-content">
<div class="topnav">
<div class="account">
<ul><li>Nathan Smith</li>
</ul>
</div>
<div class="accountname">
<ul><li>My Account</li></ul>
</div>
<div class="logout">
<ul><li>Log Out</li></ul>
</div>
<div class="addtofav"><ul><li>Add to Favourties</li></ul></span></div>
<div class="name"><ul><li>Voyager</li></ul></span></div>
<div>zxczxc czx</div>
</div>
</div>
<div class="sidebar">
<div class="left">
<div class="row col-xs-6 col-sm-3 col-md-2 logo">
<div class="imageinbottomtextontop">
<div class="titletextimage_image">
<a href="/content/count/en/default.html" target="_top">
<img title="COUNT" style="width:px; height:px;" src="images/logo.png" alt="COUNT">
</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div id="left-menu">
<div>
<ul class="nav nav-pills nav-stacked mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
<li class="dropdown-submenu">Strategy & Technical</li>
<li class="dropdown-submenu">Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent last-level">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">
Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus menu-align"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus menu-align" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px;">Platforms</li>
<li style="padding: 10px 15px;">Managed Funds</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li class="dropdown-submenu">Implementation</li>
<li class="dropdown-submenu">Review</li>
<li class="dropdown-submenu">Execution Only</li>
</ul>
</li>
<li class="dropdown-submenu menu-align"><a href="#" >Personal Development</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >Practice</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >News</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
if (event.preventDefault) event.preventDefault()
else event.returnValue = false;
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>
</html>
Remove margin-left: 25px; from .dropdown-submenu > .dropdown-menu
It disappears because when you try to hover into the second menu you run into that margin so you leave the initial element that maintains the hover state. Use padding instead.
Inspect the element with developer tools (right-click > Inspect) to better visually see the area around the element.
I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!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></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?
So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!