We Keep Coding

How do I convert a hover dropdown menu to a clickable sidebar dropdown menu on mobile?

I'm building a navigation menu on my website and I've ran into a problem regarding a dropdown sub-menu on mobile. On desktop, using w3Schools as a reference, I created a sub-menu that displays a ul on hover.
On mobile, however, I'm having two problems:
The first is that I want to be able to click to open the menu. I've tried to look into solutions for having a clickable menu toggle on mobile and a hover toggle on desktop, but I don't know much about javascript and wouldn't know where to start. I've also tried making the menu open by clicking on both desktop and mobile, but I would prefer if it was hoverable on desktop.
I also want the menu to display differently on mobile and tablet. I want it to be a block that spans the width of my popout sidebar rather than a popup as it is on desktop. I've tried to style the menu differently to make it fit my vision (almost like an accordion dropdown), but it opens over the top of my other list items. Instead, I want it to open and push down the list items.
Any help would be appreciated!
Here's my code (this version includes a click-to-open menu on desktop and mobile):
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function subOpen() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.sub-menu-link')) {
var dropdowns = document.getElementsByClassName("sub-menu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//Code for hamburger menu toggle
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = !1;
menuBtn.addEventListener("click", () => {
menuOpen ? (menuBtn.classList.remove("open"), menuOpen = !1, document.documentElement.style.overflow = "scroll", document.body.scroll = "yes") : (menuBtn.classList.add("open"), menuOpen = !0, document.documentElement.style.overflow = "hidden", document.body.scroll = "no")
})
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.header-cont,
.nav-link {
align-items: center;
}
.header-nav,
.nav-item {
height: 60px;
}
.header {
background: #fff;
box-shadow: 0 0 10px -3px rgb(0 0 0 / 50%);
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.nav-link,
.sub-menu-link {
padding: 0 1rem 0 1rem;
font-weight: 600;
color: #0f0f0f !important;
cursor: pointer;
}
.sub-menu-link:after {
position: absolute;
right: 15px;
content: "⌃";
font-size: 15px;
border: none;
transform: rotate(180deg);
visibility: hidden!important;
}
.header-menu {
margin-right: 20px;
}
.header-menu li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.only-mobile {
display: none !important;
}
.nav-item,
.nav-link {
display: inline-block;
}
.nav-item {
line-height: 60px;
}
.drop-chevron {
margin-left: 10px;
height: 13px;
fill: #0f0f0f;
}
.nav-item:hover svg {
fill: #00007a !important;
}
.nav-item:hover {
background-color: #00007a0d;
transition: background-color 0.3s;
}
.nav-link:hover,
.sub-menu-link:hover {
color: #00007a !important;
transition: 0.3s;
text-decoration: none !important;
}
.sub-menu {
position: relative !important;
}
.sub-menu-link {
display: inline-block !important;
text-decoration: none !important;
}
#check,
.checkbtn {
display: none;
}
.sub-menu-content {
display: none;
margin-top: -0.1rem;
background-color: #fff !important;
box-shadow: 0 6px 14px -1px rgb(0 5 20 / 15%);
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 1000;
}
.sub-menu-content ul {
list-style-type: none;
line-height: 30px;
}
.sub-item {
width: 200px;
margin-left: -0.5rem;
}
.sub-menu-content li:last-child {
border-bottom: 1px solid transparent !important;
padding-bottom: 0.1rem !important;
margin-bottom: -0.2rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 0.8rem;
margin-left: -2rem;
text-decoration: none;
display: block;
text-align: left;
border-left: solid 4px transparent;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: 4px solid #ff9f1c;
background-color: #00007a0d;
color: #00007a !important;
}
/*.sub-menu:hover .sub-menu-content {
display: block;
}*/
.checkbtn {
font-size: 20px;
color: #00007a;
float: right;
line-height: 60px;
margin-right: 1rem;
cursor: pointer;
}
#media (max-width: 1025px) {
selector .header-logo {
margin-top: 0.1rem;
padding-top: 0;
}
.header-cont {
justify-content: space-between;
}
.only-mobile,
.sub-menu-link {
display: block !important;
}
.checkbtn,
.nav-link,
.sub-menu {
display: block;
}
.drop-chevron {
display: none;
}
.sub-menu-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
position: relative!important;
box-shadow: none;
border-radius: 0px!important;
}
.sub-menu-link:after {
visibility: visible!important;
}
.sub-item {
border-top: none;
margin-left: -1rem;
margin-top: 0rem;
margin-bottom: 0px;
box-sizing: border-box;
line-height: 3rem;
border-bottom: solid 1px #B5B5B5;
}
.sub-menu-content li:last-child {
padding-bottom: 0rem!important;
margin-bottom: 0rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 8px;
margin-left: 0rem;
text-decoration: none;
display: block;
border-left: none;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: none;
background-color: #00007a0d;
color: #00007a!important;
}
.header-menu {
position: absolute;
margin-top: 60px;
width: 80%;
height: 100vh;
background: #e8e8e8;
left: -100%;
text-align: left;
transition: 0.5s;
margin-right: 0;
padding: 0;
box-shadow: rgb(18 18 18 / 8%) 4px 4px 12px 0;
overflow: hidden!important;
}
.header-menu li:first-child {
margin-top: 0;
}
.header-menu :last-child {
padding-bottom: 0 !important;
}
.nav-item {
border-top: none;
margin-left: 0;
box-sizing: border-box;
border-bottom: 1px solid #b5b5b5;
width: 100%;
text-align: left;
line-height: 60px;
height: 60px;
display: block;
}
.nav-link:hover,
.sub-menu-link:hover {
background: #00007a0d;
transition-duration: 0.25s;
}
#check:checked~ul {
left: 0;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 60px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.menu-btn__burger,
.menu-btn__burger::after,
.menu-btn__burger::before {
width: 22px;
height: 2.5px;
background: #00007a;
border-radius: 3px;
transition: 0.3s ease-in-out;
}
.menu-btn__burger::after,
.menu-btn__burger::before {
content: "";
position: absolute;
}
.menu-btn__burger::before {
transform: translateY(-6.5px);
}
.menu-btn__burger::after {
transform: translateY(6.5px);
}
.menu-btn.open .menu-btn__burger {
background: 0 0;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.submenu {
list-style-type: none!important;
}
.subitem {
padding: 15px;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu:after {}
.has-submenu>a::after {
line-height: 16px;
font-weight: 600;
font-size: 15px;
border: none;
color: #0f0f0f;
padding-right: 0.3rem;
padding-top: 0.2rem;
display: inline-block;
content: "⌃";
transform: rotate(180deg);
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.submenu-active {
border-radius: 0;
}
<div class="header">
<div class="header-cont">
<div class="header-logo">
<a aria-hidden="true" href="/">
LOGO
</a>
</div>
<nav class="header-nav">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</label>
<ul class="header-menu">
<li class="nav-item">
<div class="sub-menu">
<a onclick="subOpen()" class="sub-menu-link">link 1<svg class="drop-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></a>
<div id="myDropdown" class="sub-menu-content">
<ul>
<li class="sub-item">sub link 1</li>
<li class="sub-item">sub link 2</li>
<li class="sub-item">sub link 3</li>
<li class="sub-item">sub link 4</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">link 2</li>
<li class="nav-item">link 3</li>
<li class="nav-item">link 4</li>
</ul>
</nav>
</div>
</div>

Add this to your CSS:
#media(min-width: 1025px){
.sub-menu:hover .sub-menu-content {
display: block;
}
}
This will make sure when the screen width is larger than 1025px (such as on a desktop and not mobile) your hover function will work to show the sub menu.

Prevent the submenu hiding when clicking on the form to sign in / Change background color when parent li is clicked

I have a nav menu which has dropdown lists, and I have two problems atm:
I have the menu that when you click on a parent li, it will show its submenu, and when you click on another parent li or elsewhere in the page, it will hide.
On the first li.parent, i have a login form. The code I have won't let me click on the form to enter the login details. It will hide if I click on it.
How can I fill in the login form or click on it without it being hidden? But when I click elsewhere on the page it will close?
And
2) I want to have the li.parent to change its background color when I open one of its submenu. And return to his normal background color when closing the submenu.
//HEADER NAV-BAR SCRIPTS:
//Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere
function hide_sub_navs() {
$('.parent ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".parent").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".parent").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});
/** NAV MENU **/
div#nav-bar {
float: right;
display: inline-block;
height: 34px;
width: 40%;
clear: right;
padding: 0px 20px;
background-color: #FFF;
overflow: hidden;
}
/** Main Menu **/
div#nav-bar ul {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
padding: 0px auto;
margin-top: 7px;
margin-bottom: 0;
margin-right: 10px;
margin-left: auto;
text-align: center;
width: auto;
height: 25px;
list-style-type: none;
font-family: Roboto, sans-serif;
background-color: #FFF;
display: block;
}
/** Titles **/
div#nav-bar ul li.title, li.parent {
display: inline-block;
height: 28px;
width: auto;
line-height: 28px;
padding: 0px 5px;
margin: 0px 5px;
position: relative;
border-radius: 3px;
font-weight: 800;
color: #005D96;
font-size: 14px;
}
/*Change Main Menu li background when hovering*/
div#nav-bar ul li:hover {
background-color: rgba(0, 184, 227, 0.1);
}
div#nav-bar ul li div#register li:hover {
background-color: inherit;
}
div#nav-bar ul#mainmenu li a#home {
display: inline-block;
text-decoration: none;
color: inherit;
width: auto;
height: 28px;
margin: 0px 5px;
padding: 0px 5px;
font-weight: 800;
color: #005D96;
font-size: 14px;
line-height: 28px;
position: relative;
border-radius: 3px;
}
/** Submenus **/
div#nav-bar ul ul {
height: 0 auto;
width: 0 auto;
position: absolute;
z-index: 1000;
background-color: #004469;
margin-top: 28px;
margin-right: 0px;
margin-left: 0px;
padding: 0px 10px;
border-radius: 3px;
display: none;
}
div#nav-bar ul ul li.child-element {
background-color: transparent;
font-weight: lighter;
font-size: 12.5px;
color: #FFF;
display: inline-block;
float: left;
height: 25px;
width: auto;
text-align: left;
line-height: 30px;
margin-top: 5px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0px 10px;
border-radius: 3px;
}
div#nav-bar ul ul li a {
display: inline-block;
text-decoration: none;
color: inherit;
height: 27px;
font-weight: lighter;
color: #FFF;
font-size: 12.5px;
border-radius: 3px;
}
/** Submenu 1 - Account **/
div#nav-bar ul ul#submenu1 {
width: 190px;
height: 240px;
}
/*SUBMENU 1 - LOGIN FORM*/
form {
border: none;
font-weight: lighter;
}
form p {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.9em;
text-align: center;
line-height: 20px;
height: 15px;
float: center;
margin-top: 10px;
}
form label b {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.8em;
line-height: 20px;
height: 15px;
float: left;
}
input[type=text], input[type=password] {
width: 100%;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: rgba(0, 208, 244, 1);
color: white;
font-size: 0.8em;
padding: 5px 5px;
margin-top: 10px;
margin-bottom: 0px;
border: none;
cursor: pointer;
width: 30%;
float: right;
}
div#rememberme {
font-size: 0.8em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
float: left;
padding: 0 10px;
margin: 8px 0;
}
div#forgotpsw p {
height: 20px;
width: auto;
position: relative;
top: -10px;
float: right;
font-family: Roboto, sans-serif;
font-size: 0.8em;
font-weight: lighter;
color: #FFF;
line-height: 15px;
}
div#forgotpsw p a.forgot {
display: inline-block;
height: auto;
text-decoration: underline;
width: auto;
font-family: Roboto, sans-serif;
font-size: 1em;
font-weight: lighter;
padding: 0px 2px;
}
/*Register*/
div#register {
display: inline-block;
margin-top: -10px;
width: 210px;
height: 50px;
position: relative;
left: -10px;
border-radius: 3px;
background-color: #00598A;
font-weight: lighter;
}
div#register li p.register {
font-size: 0.85em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
margin: 0px 10px;;
height: 50px;
line-height: 25px;
text-align: center;
}
div#register li p a.register {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: #FFF;
font-family: Roboto, sans-serif;
font-size: 1em;
}
.container {
padding: 0;
padding-bottom: 10px;
height: 170px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
/** Submenu 2 - Manage Bookings **/
div#nav-bar ul ul#submenu2 {
width: 170px;
height: 130px;
}
/** Submenu 3 - Support **/
div#nav-bar ul ul#submenu3 {
width: 140px;
height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="nav-bar">
<ul id="mainmenu">
<li class="title"><a href="index.html" id="home" >Home</a></li>
<li class="parent">Account
<ul id="submenu1">
<!--Login Form-->
<form>
<div class="container">
<p>Log-in to Access your Account</p>
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div id="rememberme">
<input type="checkbox" checked="checked ">Remember me
</div>
<!--Forgot Password-->
<div id="forgotpsw">
<li class="forgot">
<p>Forgot <a class="forgot" href="forgot.html">Password</a> ?</p>
</li>
</div>
</div>
</form>
<!--Register-->
<div id="register">
<li>
<p class="register">Don't have an account yet? Click
<a class="register" href="register.html">here</a> to Register.</p>
</li>
</div>
</ul>
</li>
<li class="parent">Manage Bookings
<ul id="submenu2">
<li class="child-element">Itineraries</li>
<li class="child-element">Manage my Flights</li>
<li class="child-element">Manage Hotel Bookings</li>
<li class="child-element">Travel Documents</li>
</ul>
</li>
<li class="parent">Support
<ul id="submenu3">
<li class="child-element">Customer Service</li>
<li class="child-element">Feedback</li>
</ul>
</li>
</ul>
</div>
</body>

Okay, I came up with this code, will it work well?? It worked for me on Boostrap Studio.
changed html li.parent elements to:
<li id="account" class="parent">Account
<li id="bookings" class="parent">
<li id="support" class="parent">Support
I added an id to each parent li. Also, each of its submenu has an id (#submenu1, #submenu2, #submenu3).
This is the script i used to keep the submenu open while I'm clicking anywhere inside it, and closing it if i click a different parent or anywhere else in html file.
$('html, .parent').click(function() {
$('#submenu1').hide();
});
$('#mainmenu, #submenu1').click(function(event) {
event.stopPropagation();
});
$('#account').click(function(event) {
$('#submenu1').toggle();
});
$('html, .parent').click(function() {
$('#submenu2').hide();
});
$('#mainmenu, #submenu2').click(function(event) {
event.stopPropagation();
});
$('#bookings').click(function(event) {
$('#submenu2').toggle();
});
$('html, .parent').click(function() {
$('#submenu3').hide();
});
$('#mainmenu, #submenu3').click(function(event) {
event.stopPropagation();
});
$('#support').click(function(event) {
$('#submenu3').toggle();
});

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

How do dynamically resize a image - CSS / HTML

I'm trying to dynamically resize a .png image to whatever text is put on the box. As you can see from the printscreen it doesn't resize dynamically to fit the text in the box. I have no idea how to make it work ... the link to that page is here. I've tried formatting the padding, margins and adding classes and divs to that, but it didn't work. A link to the website can be found here.
So the problem in the
<div id='page' class='container'>:
<div id="page-bg1">
<div id="page-bg2">
<div id="page-bg3">
<div id="page" class="container">
<div class="box-style2" id="content">
<h2 class="title">Services</h2>
<p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships
</p>
<h2>Building Maintenance Services:</h2>
<ul>
<li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits.
</li>
<li><b>Certified Cleanroom Attendant Services: </b>
Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling.
</li>
</ul>
</div>
<div id="sidebar">
<div id="box2" class="box-style2">
<h2 class="title">Specialized Cleaning Services</h2>
<ul class="style3">
<li>ESD and composition tile floor refinishing and maintenance</li>
<li>Carpet and area rug cleaning</li>
<li>Cubicle fabrics partition and upholstery cleaning</li>
<li>Kitchen and cafeteria cleaning</li>
<li>Window and glass cleaning</li>
<li>Wall and ceiling cleaning</li>
</ul>
</div>
<div id="box3" class="box-style2">
<h2 class="title">Additional Services</h2>
<ul>
<li>Post-construction cleanup</li>
<li>Temporary hourly-rate personnel</li>
<li>Matron/day porters</li>
<li>Pressure washing</li>
<li>Painting</li>
<li>Relamping</li>
<li>Mold and mildew treatments</li>
<li>Fabric and carpet soil protection</li>
<li>Carpet deodorizing</li>
<li>Floor mat purchase and rental programs</li>
<li>Flame retardant applications</li>
<li>Static control applications</li>
<li>Seasonal school dormitory cleaning</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The CSS is here:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: url(palette/png/Background/bg.png) repeat left top;
font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif;
//color: #94856A;
color: #0020C2;
}
a
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Arvo', serif;
}
p, ol, ul {
margin-top: 0px;
}
strong {
}
a {
color: #789329;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
.image-wrapper {
position : relative;
}
.scale-image {
display : block;
width : auto;
max-width : 75% ;
}
/** WRAPPER */
#wrapper {
background: url(palette/png/Background/bg.png) repeat left top;
}
#main-bg {
background: url(palette/png/Background/bg_combined.png) repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
height: 183px;
background: url(images/fmn_200.jpg) no-repeat center top;
text-align: center;
text-transform: uppercase;
}
#logo h1, #logo p {
margin: 0px;
}
#logo h1 {
padding-top: 107px;
letter-spacing: 2px;
line-height: 25px;
font-size: 25px;
color: #FFFFFF;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo p {
padding-top: 15px;
letter-spacing: 1px;
line-height: 14px;
font-size: 14px;
color: #776D5C;
background: url(image/fmn_200.jpg);
}
/** MENU */
#menu {
height: 100px;
background: url(images/crop.png) repeat center top;
}
#menu ul {
height: 69px;
margin: 0px;
padding: 31px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
margin: 0 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
line-height: 68px;
font-size: 14px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/** PAGE */
#page-bg1 {
overflow: hidden;
background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom;
}
#page-bg2 {
background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top;
}
#page-bg3 {
background: url(palette/png/CBG/cbg_combined.png) repeat center bottom;
}
#page {
overflow: hidden;
padding: 50px 0px 50px 0px;
}
.homepage #page {
height: auto !important;
height: 380px;
min-height: 380px;
}
/** SLIDERTRON */
#slidertron {
position: relative;
width: 900px;
height: 300px;
margin: 0px auto;
}
#slidertron .viewer {
width: 900px;
height: 290px;
overflow: hidden;
}
#slidertron .reel {
}
#slidertron .slide {
float: left;
width: 640px;
height: 260px;
background: #FFFFFF;
}
#slidertron .slide img {
padding: 9px;
border: 1px solid #E4E2DE;
}
#slidertron .indicator {
position: absolute;
bottom: 0px;
width: 100%;
height: 16px;
cursor: default;
user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-webkit-user-select: none !important;
}
#slidertron .indicator ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#slidertron .indicator li {
display: inline;
}
#slidertron .indicator li.active {
}
#slidertron .indicator a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 3px;
background: url(images/slidertron_01.png) no-repeat -16px -258px;
text-indent: -9999em;
}
#slidertron .indicator li.active a {
background-position: 0px -258px;
}
#slidertron .navigation a {
position: absolute;
top: 1px;
display: block;
width: 125px;
height: 258px;
background: url(images/slidertron_01.png) no-repeat;
text-indent: -9999em;
}
#slidertron .navigation a.previous {
left: -1px;
background-position: 0px 0px;
}
#slidertron .navigation a.next {
background-position: 100% 0px;
right: -1px;
}
/** CONTENT */
#content {
float: left;
width: 600px;
padding-left: 50px;
}
.two-column2 #content {
float: right;
padding-right: 50px;
padding-left: 0px;
}
#wide-content {
overflow: hidden;
padding: 0px 50px;
}
/** SIDEBAR */
#sidebar {
float: right;
width: 260px;
padding-right: 50px;
}
.two-column2 #sidebar {
float: left;
padding-left: 50px;
padding-right: 0px;
}
#sidebar .title {
font-size: 18px;
}
/** FOOTER BLOCK */
#footer-block-wrapper {
overflow: hidden;
padding-bottom: 40px;
}
#footer-block-bg {
overflow: hidden;
padding-bottom: 30px;
background: url(palette/png/Background/bg_bar.png) repeat-y center top;
}
#footer-block-bgtop {
background: url(palette/png/Background/bg_bar.png) no-repeat center top;
}
#footer-block {
overflow: hidden;
width: 860px;
height: auto !important;
padding: 70px 70px 0px 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6C5F48;
}
#footer-block h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#footer-block #column1 {
float: left;
width: 240px;
margin-right: 70px;
}
#footer-block #column2 {
float: left;
width: 240px;
}
#footer-block #column3 {
float: right;
width: 240px;
}
/** FOOTER */
#footer {
padding: 50px 0px 70px 0px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2F2518;
}
/** BOX 1 */
#box1 .title1, #box1 .title2 {
text-align: center;
}
/** BOX 2 */
#box2 {
margin-bottom: 30px;
}
/** BOX STYLE 1 */
.box-style1 {
}
.box-style1 .title1 {
padding: 0px 0px 5px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #3C3223;
}
.box-style1 .title2 {
padding: 0px 0px 15px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
color: #8A7C60;
}
/** BOX STYLE 2 */
.box-style2 {
}
.box-style2 .title {
padding: 0px 0px 5px 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
color: #3C3223;
}
.box-style2 .byline {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
color: #8B806F;
}
/** LINK STYLE 1 */
.link-style1 {
display: inline-block;
height: 48px;
margin: 9px 0px 0px 0px;
background: url(images/bio_2.png) repeat-x left top;
}
.link-style1 a {
display: inline-block;
height: 48px;
background: url(images/bio_1.png) no-repeat left top;
line-height: 48px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.link-style1 span {
display: inline-block;
padding: 0px 30px 0px 30px;
background: url(images/bio_3.png) no-repeat right top;
color: #FFFFF;
}
/** LINK STYLE 2 */
.link-style2 {
display: inline-block;
background: url(images/homepage09.gif) no-repeat left 3px;
margin-top: 20px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LINK STYLE 3 */
.link-style3 {
background: url(images/homepage10.gif) no-repeat left 2px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
}
ul.style1 a {
color: #6C5F48;
}
/** LIST STYLE 2 */
ul.style2 {
margin: 0px 0px 10px 0px;
padding: 10px 0px;
list-style: none;
}
ul.style2 li {
float: left;
margin-right: 9px;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
}
The images which needs to be resized are palette/png/CBG/cbg_combined.png and palette/png/CBG/cbg_shadow.png, presented in the divs #page-bg3, #page-bg2 and #page-bg1. That's the image that I wanted to resize according to the div text presented in that box.. I'm also adding a screenshot so you guys can have an idea of the problem.
What can I do to make it work? I only need this central banner to be able to dynamically resize.
I'm also adding a screenshot of how I wanted the page to look like:

Basically, I have cropped your background and used it in a differnt way. You can get the images from the following link:
#page-bg1
#page-bg2
#page-bg-3
And here's my code:
#page-bg1 {
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center;
}
#page-bg2 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top;
}
#page-bg3 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom;
}
Little Explanation:
#page-bg1 is the background behind and outside the box.
#page-bg-2 is a vertically repeating background inside the box where you put your content.
#page-bg-3 is a backgroud with dashed border at the bottom of your content box which doesn't repeat but is always fixed at the bottom.