header changing style when uploaded to server

header changing style when uploaded to server - javascript

I have a website which is live. Its header should be like the below image:
When I am working on local its like that only, but when I am uploading to the server the header becomes small in every page except one page
every page it becomes small page except this page except
The CSS is below for header:
body {
font-family: Montserrat, sans-serif;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
border-radius: 0;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
padding: 10px 22px 0 5px;
}
.navbar-inverse :hover {
background-color: transparent;
}
.navbar-header {
float: none;
}
.custom-navbar {
padding: 0;
}
.navbar {
border-radius: 0;
background-color: #01b7a8;
border-color: #01b7a8;
box-shadow: 0 0px 10px 3px rgba(0, 0, 0, .5);
}
.navbar-inverse .navbar-nav>li>a {
font-size: 19px;
color: #fff;
letter-spacing: 1px;
}
.navbar-inverse .navbar-nav>li>a:hover {
background-color: #01b7a8;
color: #0a2240;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: transparent;
}
#media screen and (max-width: 768px) {
.custom-navbar {
display: inline-flex;
}
.custom-navbar li .btn {
margin-bottom: 2vh;
}
}
#media screen and (min-width: 768px) {
.navbar-right {
/*position: relative;
top: -7vh*/
}
.custom-navbar {
position: absolute;
top: 1vh;
z-index: 2222;
right: 3vh;
}
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
background-color: #fff;
/* padding: 0 15px 0 15px; */
}
.dropdown-menu>li>a {
color: #0a2240 !important;
background-color: #efeff0;
}
/* dropdown-menu */
#media (max-width: 767px) .navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.container-fluid {
padding-right: 15px;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #fff;
background-color: #d9f4f2;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 132%;
border-radius: 0;
padding: 0 0;
border: 0px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #333! important;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-menu>li>a {
display: block;
padding: 10px 20px;
color: #0a2240 !important;
background-color: #efeff0;
}
.dropdown-menu>li>a:hover {
background-color: #d9f4f2;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*dropdown-menu end */
/*top button */
.btn:hover {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
.btn:active {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
/*links styling*/
#myNavbara>li>a: hover {
background-color: #01b7a8 !important;
color: #0a2240 !important;
}
can anyone tell me how to fix this?

I think, there is must be a live CDN link and which does not work on local may be because internet issue and when you upload on server then It works with internet.
You can check your all the files for this. May be this will work for you.
Thank you.

I'm noticing that you have inline styles applied to your header buttons, which are different for this page and this page. Also, I noticed that some of your font sizes are in vh. Try using something like em or rem instead.
I don't know how you're building this website, but if possible, drop the inline styles and style the buttons with their class instead.

Related

How to set specified date bootstrap datepicker?

I'm using this bootstrap datepicker plugin and I want to set class for my specified days for example I have booked days and I want to set a class for my these days but I don't want to disabed them how can I do hat ?
$(document).ready(function() {
$('#date-range12').dateRangePicker({
inline: true,
container: '#date-range12-container',
alwaysOpen: true,
format: 'DD.MM.YYYY',
separator: ' to ',
language: 'tr',
showTopbar: false,
showWeekNumbers: false,
extraClass: 'date-range-picker19',
monthSelect: true,
yearSelect: true,
customArrowPrevSymbol: '',
customArrowNextSymbol: '',
//maxDays: 7,
//minDays: 3,
startDate: moment(),
startOfWeek: 'monday',
customTopBar: 'Tarih Aralığı Seçiniz',
showDateFilter: function(time, date) {
return '<div style="padding:0 5px;">\
<span style="font-weight:bold">' + date + '</span>\
<div style="opacity:0.3;">$' + Math.round(Math.random() * 999) + '</div>\
</div>';
}
});
});
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 700;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
//border: 1px solid #bfbfbf;
background-color: #efefef;
//padding: 5px 12px;
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial, sans-serif;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
-webkit-box-sizing: initial;
box-sizing: initial
}
.dp-clearfix {
clear: both;
height: 0;
font-size: 0
}
.date-picker-wrapper.inline-wrapper {
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block
}
.date-picker-wrapper.single-date {
width: auto
}
.date-picker-wrapper.no-shortcuts {
//padding-bottom: 12px
}
.date-picker-wrapper.no-topbar {
//padding-top: 12px
}
.date-picker-wrapper .footer {
font-size: 11px;
//padding-top: 3px
}
.date-picker-wrapper b {
color: #666;
font-weight: 700
}
.date-picker-wrapper a {
color: #6bb4d6;
text-decoration: underline
}
.date-picker-wrapper .month-name {
text-transform: uppercase
}
.date-picker-wrapper .select-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper:hover {
text-decoration: underline
}
.date-picker-wrapper .month-element {
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper select {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -1px;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: 0;
outline: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: .01
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
//border-radius: 3px;
//background-color: #fff;
background-color: #d0d5de;
padding: 12px 12px 40px 12px;
cursor: default;
position: relative;
_overflow: hidden;
width:100% !important;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
margin-right:20px;;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: left
}
.date-picker-wrapper .month-wrapper table td,
.date-picker-wrapper .month-wrapper table th {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0;
padding: 0;
color:#FFF;
font-weight: normal;
font-size: 14px;
}
.date-picker-wrapper .month-wrapper table .day {
//padding: 5px 0;
//line-height: 1;
//font-size: 12px;
//margin-bottom: 1px;
//color: #ccc;
//cursor: default;
line-height: 1;
font-size: 12px;
color: #ccc;
cursor: not-allowed;
padding: 15px;
border: 1px solid #eee;
background: #f0f0f0;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default
}
.date-picker-wrapper .month-wrapper table .week-name {
height: 40px;
line-height: 20px;
font-weight: 100;
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help!important
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
white-space: nowrap
}
.date-picker-wrapper .time label {
white-space: nowrap;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
padding: 15px;
border: 1px solid #eee;
background: #FFF;
}
.date-picker-wrapper .month-wrapper table .day.lastMonth,
.date-picker-wrapper .month-wrapper table .day.nextMonth {
display: none
}
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: #ffe684
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
background-color: #70ccd5
}
.date-picker-wrapper table .caption {
height: 40px;
background-color: #4d5567;
color: #CBCDD0;
padding: 13px 0px;
font-size: 15px;
text-align: center;
}
.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
width: 27px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
width:50px;
height:40px;
line-height:40px;
vertical-align: middle;
display:block;
cursor: pointer;
background:#667493;
}
.caption .next{
float:right;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: #fff
}
.date-picker-wrapper .gap {
position: relative;
z-index: 1;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
float: left;
top: -5px;
margin: 0 10px -10px;
visibility: hidden;
height: 0;
display:none;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
overflow: hidden
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid #fff;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid #fff
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .selected-days {
display: none
}
.date-picker-wrapper .drp_top-bar {
line-height: 1.4;
position: relative;
padding: 10px 40px 10px 0
}
.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
display: none
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block
}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
color: #333
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: #fff;
line-height: initial
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
cursor: pointer;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.date-picker-wrapper .time {
position: relative
}
.date-picker-wrapper.single-month .time {
display: block
}
.date-picker-wrapper .time input[type=range] {
vertical-align: middle;
width: 129px;
padding: 0;
margin: 0;
height: 20px
}
.date-picker-wrapper .time1 {
width: 180px;
padding: 0 5px;
text-align: center
}
.time2 {
width: 180px;
padding: 0 5px;
text-align: center
}
.date-picker-wrapper .time1 {
float: left
}
.date-picker-wrapper .time2 {
float: right
}
.date-picker-wrapper .hour {
text-align: right
}
.minute {
text-align: right
}
.date-picker-wrapper .hide {
display: none
}
.date-picker-wrapper .date-range-length-tip {
position: absolute;
margin-top: -4px;
margin-left: -8px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
display: none;
background-color: #ff0;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
line-height: 16px;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3))
}
.date-picker-wrapper .date-range-length-tip:after {
content: '';
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ff0;
left: 50%;
margin-left: -4px;
bottom: -4px
}
.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
display: none
}
.date-picker-wrapper .week-number {
padding: 5px 0;
line-height: 1;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: pointer;
display:none;
}
.day.toMonth.valid div[style="padding:0 5px;"]{
padding:-1px !important;
}
.date-picker-wrapper .week-number.week-number-selected {
color: #49e;
font-weight: 700
}
.day.toMonth.valid div span,.day.toMonth.invalid div span {
font-weight: normal !important;
display: block;
margin-bottom: 12px;
font-size: 15px;
}
.day.toMonth.valid div span+div {
background: #4D5567;
color: #FFF;
opacity: 1 !important;
padding:7px 5px;
}
.day.toMonth.invalid div span{
opacity: 1 !important;
padding:7px 5px;
}
.week-name th:first-child{
color:transparent !important;
}
.day.toMonth.valid:hover {
background-color:#4499EE !important;
color: #fff !important
}
.date-picker-wrapper .month-wrapper table .checked {
background-color: #9cdbf7 !important;
}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: #4499EE !important;color:#FFF !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: #4499EE !important; color:#FFF !important;}
.fa-blok{
display:inline;
color:#FFF !important;
text-decoration: none !important;
}
#media screen and (max-width: 660px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid,.date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:8px;
}
.month1{
margin-bottom: 0px;
}
.date-picker-wrapper .month-wrapper table{
width:100%;
margin-right: 0;
float:none;
}
.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table th{
font-size: 12px;
}
}
#media screen and (max-width: 490px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 12px;
margin-bottom: 7px;
}
.day.toMonth.valid div span+div{
padding:3px 2px;
}
.date-picker-wrapper .month-wrapper{
padding:0;
}
}
#media screen and (max-width: 446px) {
.day.toMonth.valid div span+div{
padding:3px 0;
}
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 11px;
}
}
#media screen and (max-width: 400px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:5px 5px;
}
}
#media screen and (max-width: 320px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 10px;
margin-bottom: 12px;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:2px 0;
}
.day.toMonth.valid div span+div{
font-size: 11px;
}
}
.reserved{
position: relative;
overflow: hidden;
}
.reserved:before{
content: "";
display: block;
position: absolute;
z-index: 10;
background: #551A62;
opacity: 0.7;
width: 100%;
height: 56%;
top: -4px;
transform: rotate(116deg);
overflow: hidden;
left: -43px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/daterangepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/jquery.daterangepicker.min.js"></script>
<input type="hidden" id="date-range12" size="40" value="">
<div id="date-range12-container" style="width:100%;"></div>
Live Demo

You can use showDateFilter method to identify the dates where you want to add custom class. Please see exaple below. Here dates that needs to be highlighted are in highlightdates array.
Please note that showDateFilter filter is executed to identify the content of each date cell in the calendar.
var highlightdates = [moment('22.12.2017', 'DD.MM.YYYY'), moment('24.01.2018', 'DD.MM.YYYY')]
$(document).ready(function () {
$('#date-range12').dateRangePicker(
{
inline: true,
container: '#date-range12-container',
alwaysOpen: true,
format: 'DD.MM.YYYY',
separator: ' to ',
language: 'tr',
showTopbar: false,
showWeekNumbers: false,
extraClass: 'date-range-picker19',
monthSelect: true,
yearSelect: true,
customArrowPrevSymbol: '',
customArrowNextSymbol: '',
//maxDays: 7,
//minDays: 3,
startDate: moment(),
startOfWeek: 'monday',
customTopBar: 'Tarih Aralığı Seçiniz',
showDateFilter: function (time, date) {
var doHighlight = highlightdates.some(function(item) {
return (item.isSame(moment(time), 'day') && item.isSame(moment(time), 'month') && item.isSame(moment(time), 'year'))
})
return '<div ' + (doHighlight ? 'class="highlight"' : '') + ' style="padding:0 5px;">\
<span style="font-weight:bold">'+ date + '</span>\
<div style="opacity:0.3;">$'+ Math.round(Math.random() * 999) + '</div>\
</div>';
}
});
});
.highlight {
background-color: red;
}
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 700;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
//border: 1px solid #bfbfbf;
background-color: #efefef;
//padding: 5px 12px;
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial, sans-serif;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
-webkit-box-sizing: initial;
box-sizing: initial
}
.dp-clearfix {
clear: both;
height: 0;
font-size: 0
}
.date-picker-wrapper.inline-wrapper {
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block
}
.date-picker-wrapper.single-date {
width: auto
}
.date-picker-wrapper.no-shortcuts {
//padding-bottom: 12px
}
.date-picker-wrapper.no-topbar {
//padding-top: 12px
}
.date-picker-wrapper .footer {
font-size: 11px;
//padding-top: 3px
}
.date-picker-wrapper b {
color: #666;
font-weight: 700
}
.date-picker-wrapper a {
color: #6bb4d6;
text-decoration: underline
}
.date-picker-wrapper .month-name {
text-transform: uppercase
}
.date-picker-wrapper .select-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper:hover {
text-decoration: underline
}
.date-picker-wrapper .month-element {
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper select {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -1px;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: 0;
outline: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: .01
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
//border-radius: 3px;
//background-color: #fff;
background-color: #d0d5de;
padding: 12px 12px 40px 12px;
cursor: default;
position: relative;
_overflow: hidden;
width:100% !important;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
margin-right:20px;;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: left
}
.date-picker-wrapper .month-wrapper table td,
.date-picker-wrapper .month-wrapper table th {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0;
padding: 0;
color:#FFF;
font-weight: normal;
font-size: 14px;
}
.date-picker-wrapper .month-wrapper table .day {
//padding: 5px 0;
//line-height: 1;
//font-size: 12px;
//margin-bottom: 1px;
//color: #ccc;
//cursor: default;
line-height: 1;
font-size: 12px;
color: #ccc;
cursor: not-allowed;
padding: 15px;
border: 1px solid #eee;
background: #f0f0f0;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default
}
.date-picker-wrapper .month-wrapper table .week-name {
height: 40px;
line-height: 20px;
font-weight: 100;
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help!important
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
white-space: nowrap
}
.date-picker-wrapper .time label {
white-space: nowrap;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
padding: 15px;
border: 1px solid #eee;
background: #FFF;
}
.date-picker-wrapper .month-wrapper table .day.lastMonth,
.date-picker-wrapper .month-wrapper table .day.nextMonth {
display: none
}
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: #ffe684
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
background-color: #70ccd5
}
.date-picker-wrapper table .caption {
height: 40px;
background-color: #4d5567;
color: #CBCDD0;
padding: 13px 0px;
font-size: 15px;
text-align: center;
}
.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
width: 27px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
width:50px;
height:40px;
line-height:40px;
vertical-align: middle;
display:block;
cursor: pointer;
background:#667493;
}
.caption .next{
float:right;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: #fff
}
.date-picker-wrapper .gap {
position: relative;
z-index: 1;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
float: left;
top: -5px;
margin: 0 10px -10px;
visibility: hidden;
height: 0;
display:none;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
overflow: hidden
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid #fff;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid #fff
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .selected-days {
display: none
}
.date-picker-wrapper .drp_top-bar {
line-height: 1.4;
position: relative;
padding: 10px 40px 10px 0
}
.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
display: none
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block
}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
color: #333
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: #fff;
line-height: initial
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
cursor: pointer;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.date-picker-wrapper .time {
position: relative
}
.date-picker-wrapper.single-month .time {
display: block
}
.date-picker-wrapper .time input[type=range] {
vertical-align: middle;
width: 129px;
padding: 0;
margin: 0;
height: 20px
}
.date-picker-wrapper .time1 {
width: 180px;
padding: 0 5px;
text-align: center
}
.time2 {
width: 180px;
padding: 0 5px;
text-align: center
}
.date-picker-wrapper .time1 {
float: left
}
.date-picker-wrapper .time2 {
float: right
}
.date-picker-wrapper .hour {
text-align: right
}
.minute {
text-align: right
}
.date-picker-wrapper .hide {
display: none
}
.date-picker-wrapper .date-range-length-tip {
position: absolute;
margin-top: -4px;
margin-left: -8px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
display: none;
background-color: #ff0;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
line-height: 16px;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3))
}
.date-picker-wrapper .date-range-length-tip:after {
content: '';
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ff0;
left: 50%;
margin-left: -4px;
bottom: -4px
}
.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
display: none
}
.date-picker-wrapper .week-number {
padding: 5px 0;
line-height: 1;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: pointer;
display:none;
}
.day.toMonth.valid div[style="padding:0 5px;"]{
padding:-1px !important;
}
.date-picker-wrapper .week-number.week-number-selected {
color: #49e;
font-weight: 700
}
.day.toMonth.valid div span,.day.toMonth.invalid div span {
font-weight: normal !important;
display: block;
margin-bottom: 12px;
font-size: 15px;
}
.day.toMonth.valid div span+div {
background: #4D5567;
color: #FFF;
opacity: 1 !important;
padding:7px 5px;
}
.day.toMonth.invalid div span{
opacity: 1 !important;
padding:7px 5px;
}
.week-name th:first-child{
color:transparent !important;
}
.day.toMonth.valid:hover {
background-color:#4499EE !important;
color: #fff !important
}
.date-picker-wrapper .month-wrapper table .checked {
background-color: #9cdbf7 !important;
}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: #4499EE !important;color:#FFF !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: #4499EE !important; color:#FFF !important;}
.fa-blok{
display:inline;
color:#FFF !important;
text-decoration: none !important;
}
#media screen and (max-width: 660px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid,.date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:8px;
}
.month1{
margin-bottom: 0px;
}
.date-picker-wrapper .month-wrapper table{
width:100%;
margin-right: 0;
float:none;
}
.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table th{
font-size: 12px;
}
}
#media screen and (max-width: 490px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 12px;
margin-bottom: 7px;
}
.day.toMonth.valid div span+div{
padding:3px 2px;
}
.date-picker-wrapper .month-wrapper{
padding:0;
}
}
#media screen and (max-width: 446px) {
.day.toMonth.valid div span+div{
padding:3px 0;
}
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 11px;
}
}
#media screen and (max-width: 400px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:5px 5px;
}
}
#media screen and (max-width: 320px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 10px;
margin-bottom: 12px;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:2px 0;
}
.day.toMonth.valid div span+div{
font-size: 11px;
}
}
.reserved{
position: relative;
overflow: hidden;
}
.reserved:before{
content: "";
display: block;
position: absolute;
z-index: 10;
background: #551A62;
opacity: 0.7;
width: 100%;
height: 56%;
top: -4px;
transform: rotate(116deg);
overflow: hidden;
left: -43px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery Date Range Picker Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/daterangepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/jquery.daterangepicker.min.js"></script>
</head>
<body>
<input type="hidden" id="date-range12" size="40" value="">
<div id="date-range12-container" style="width:100%;"></div>
</body>
</html>

Submenu is disappearing on hover

My submenu is disappearing on hover.Please show me how to fix it.
#header {
padding-left: 0;
padding-right: 0;
position: relative;
}
.wp-toolbar #header{
margin-top: 0;
}
#site-title, #site-description {
padding-left: 20px;
}
#theme-logo img {
box-shadow: none;
}
/* =Navigation
*/
#top-navigation {
position: absolute;
bottom: -10px;
right: 0;
}
#theme-top-menu {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#theme-top-menu .sub-menu {
left: auto;
right: 0px;
}
.menu .current_page_item a, .menu .current-menu-item a {
background-color: transparent;
}
#theme-top-menu a {
padding: 0 0.9em;
border: none;
font-weight: normal;
font-size: 80%;
}
#site-navigation{
padding: 0;
position: relative;
max-width: 1140px;
border-top: 1px solid #666666;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.fullwidth #site-navigation {
max-width: 100%;
}
#site-navigation .theme-wrap {
padding: 0 5px;
position: relative;
min-height: 50px;
}
#theme-menu-main {
margin: 0 auto;
background-color: transparent;
}
#theme-menu-main > li {
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
margin: 0;
padding: 10px 0;
}
#theme-menu-main > li a {
border: none;
font-weight: bold;
}
#theme-menu-main > li:hover {
background-color: transparent;
}
#theme-menu-main > li > ul {
top: 50%;
left: 0.9em;
padding: 10px 0;
}
#theme-menu-main > li ul > li a {
margin: 0 10px;
padding: 5px 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 100;
}
#theme-menu-main > li ul > li:last-child a{
border: none;
}
#theme-menu-main > li > a span{
padding: 0 0 2px;
border-bottom: 3px solid transparent;
}
#theme-menu-main a {
background-color: transparent;
font-weight: 100;
}
.menu a:hover { background: none; }

Try this:
ul li:hover ul {
display:block;
}

adding an image to css breadcrumbs

I want to use these nice breadcrumbs jsfiddle.net/orihadar/bugvgbf5/ but I need to add image above each text, so each LI will include both an image and text under this image (both horizontally centered).
Any attempt to do so destroy the nice look of these breadcrumbs.
Any idea how can I do it?
Following is the CSS:
ul{
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .5em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}

Something like this?
You need to be more clear on what you are trying to achieve here.
http://jsfiddle.net/bugvgbf5/4/
<ul id="breadcrumbs-two">
<li>
<a>
<img src="https://www.gravatar.com/avatar/0dadd597898bbd33e37fe684fa07aa2d?s=24&d=identicon&r=PG"/>
<br/>
bkbgbhighb
</a>
</li>

Clicking on page refreshes ; reappears two input elements?

I'm usig plugin for drop-down (sub-menu) in my HTML. My HTML looks like following:-
HTML
<div class="taxonomy" id="taxonomy_id" style="height: 54px">
<input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category_1" id="category_1" value="" /></div>
</body>
JS
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",{targetColumnSize: 1});
$("#category_1").mcDropdown("#categorymenu_1",{targetColumnSize: 1});
DEMO
Now, when I hit refresh once the page is loaded, I see the rest of html elements remain static on page, the dropdown items appears / refreshes instead. With each refresh they are loaded again the focus is changed it seems, can I change this behaviour.
UPDATE PLUGIN CSS
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}

Add !important to your css that must be used.
.myOverride:focus {
display: block !important;
}
Just like that. This was an example, but you'd have to change it up a little to suit your needs.

Twitter Bootstrap - Nav collapse

I am working on updating my website to be responsive using Twitter Bootstrap. My current website can be viewed # http://www.JoshuaBock.com.
I am encountering an issue on trying to customize the Navbar collapse functionality. At the moment I have it displaying correctly, but it does not function between 981 pixels and 1126 pixels. I am avoiding modifying the Bootstrap base code so I can easily upgrade to a newer version of Bootstrap. The issue is being caused by my custom media query:
Media Query
<pre><code>
#media (min-width: 980px) and (max-width: 1126px) {
.navbar{
width: 85%;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-right: 10px;
padding-left: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #777777;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #777777;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
#media (min-width: 980px) and (max-width: 1126px) {
.nav-collapse.collapse{
height:0 !important;
overflow:hidden !important;
}
}
</pre></code>
More specify the !important section seems to be causing the issue. If I remove the !important the nav does not collapse.
The actual code can be view on my beta site # http://beta.joshuabock.com/index.html
I know I am close to the solution, but could use some help figuring this out. Any help will be greatly appreciated. Thanks in advance.

When I specify media queries I normally specify them like so
#media all and (min-width: 980px) and (max-width: 1126px)
noticed yours starts #media, so not sure if that causing any issues

Here is how I solved this
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

We Keep Coding

JavaScript is the programming language of the Web.

header changing style when uploaded to server - javascript

I think, there is must be a live CDN link and which does not work on local may be because internet issue and when you upload on server then It works with internet. You can check your all the files for this. May be this will work for you. Thank you.

Related

How to set specified date bootstrap datepicker?

Submenu is disappearing on hover

adding an image to css breadcrumbs

Clicking on page refreshes ; reappears two input elements?

Twitter Bootstrap - Nav collapse

Categories

Resources