How to get submenu to appear below main menu - javascript

Menu
NOTE: you may need to expand the Result Box
above is what i am trying to fix, the idea is that when you hover the Men and Women <li> elements a submenu appears below, this is why the hidden div is inside the <li> because then when you leave the link to go into the div it's not going to disappear. however my problem is that the other menu items are being pushed down.
Now before i did have it working, this is what i had
Old Version
however i was requested to push the first 3 links to the left and the last link to the right. all i did was add floats which seem to be the cause. i have tried changing the display property, I've tried changing the position property however the only other result i get that the sub menu sets on the end and not under the menu.
I've about ran out of idea except for getting the x and y coordinates and using css to force the div to sit there however i don't think it'll work unless it's outside the <li>, What else can i do to get my submenu to work correctly while keeping the menu alignment as it is


Is this the result you wanted to achieve? I've added my CSS at the end, for the floating of the "Cart" entry, I added an ID (cart) to cart <li> element.
JSFiddle
Here is a snippet.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/* ie 6/7 */
}
/* Actual CSS */
#copyright {
text-align: center;
margin: 0px auto;
font-size: 10px;
}
#container {
width: 930px;
margin: 0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float: left;
text-align: center;
}
#byline {
background: #7D787D;
text-align: center;
color: white;
margin-top: 12px;
margin-bottom: 12px;
padding: 5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear: both;
margin: 0;
padding: 0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left: 27px !important;
}
.shipping a {
padding-left: 47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left: 75px !important;
padding-top: .2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left: 23px !important;
padding-top: .2em !important;
}
#herofooter ul li a:hover,
#footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a,
#footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu {
width: 800px;
text-align: center;
margin: 0px auto;
}
#footernav li {
font-size: 12px;
}
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color: #000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color: #000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color: #CC3333;
color: #FFFFFF;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale,
#logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align: center;
margin-right: 25px;
display: block;
float: right;
margin-top: 15px;
}
#stylesearch {
border: 1px solid black;
padding: 0;
margin: 0;
width: 190px;
padding-top: 2px;
line-height: 22px;
}
#productsearch {
padding-left: 5px;
padding-right: 5px;
}
#searchbox {
border: 0;
border-right: 1px solid #686868;
margin-right: 2px;
margin-bottom: 1px;
margin-top: 1px;
padding: 5px;
width: 140px;
float: left;
}
#searchbox:focus,
#searchbox:hover {
background: #FDFDFD;
color: #000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em;
/*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
float: right;
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top: 1px solid #CC0001;
}
/* nav me */
.navme ul li {
display: inline;
}
.navme ul li a {
text-decoration: none;
}
#memberprogram p {
/* margin: 0; */
}
#footermenu {
text-align: left;
}
#footernav li {
display: inline-block;
width: 145px;
}
.cartimage {
vertical-align: middle;
margin-top: -7px;
border-style: none
}
.navbuttons {
min-height: 30px;
}
.mega-menu {
float: left;
z-index: 1000;
position: inherit;
text-align: left;
background: #aaaaaa;
}
/*--------Added CSS---------*/
.mega-menu {
position: absolute;
left: 0;
top: 100%;
width: 500px;
}
#navbar ul li {
position: relative;
float: left;
}
#navbar ul ul li {
float: none;
}
#navbar ul ul li a {
padding: 0 15px 0 15px;
}
#navbar ul li:hover > ul {
display: block;
}
#navbar ul li#cart {
float: right;
}
li.header {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function showMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "block"
})
}
function hideMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "none"
})
}
</script>
<div id="navbar" class="navbuttons">
<ul id="headernav">
<li>New Arrivals
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Men
<div id="mens-cat" name="mens-cat" class="mega-menu" style="display: none; margin-top: -1px;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Activewear
</li>
<li> Business Shirts
</li>
<li> Coats and Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Women
<div id="womens-cat" name="womens-cat" class="mega-menu" style="display: none;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Basic Tops
</li>
<!-- <li>Cathouse Suits</li>-->
<li> Fashion Tops
</li>
<li> Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li id="cart">My Cart
</li>
</ul>
</div>


see the jsfiddle code : http://jsfiddle.net/sbaxe5m3/2/
add this css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* ie 6/7 */
}
/* Actual CSS */
#copyright { text-align:center; margin:0px auto; font-size:10px; }
#container {
width: 930px;
margin:0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float:left;
text-align:center;
}
#byline {
background: #7D787D;
text-align:center;
color: white;
margin-top:12px;
margin-bottom:12px;
padding:5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear:both;
margin:0;
padding:0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left:27px !important;
}
.shipping a {
padding-left:47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left:75px !important;
padding-top:.2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left:23px !important;
padding-top:.2em !important;
}
#herofooter ul li a:hover, #footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a, #footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu { width: 800px; text-align:center; margin: 0px auto;}
#footernav li { font-size:12px; }
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color:#000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color:#000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color:#CC3333 ;
color:#FFFFFF ;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale, #logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align:center;
margin-right:25px;
display:block;
float:right;
margin-top:15px;
}
#stylesearch {
border:1px solid black;
padding:0;
margin:0;
width:190px;
padding-top:2px;
line-height:22px;
}
#productsearch {
padding-left:5px;
padding-right:5px;
}
#searchbox {
border:0;
border-right:1px solid #686868;
margin-right:2px;
margin-bottom:1px;
margin-top:1px;
padding:5px;
width:140px;
float: left;
}
#searchbox:focus, #searchbox:hover {
background: #FDFDFD;
color:#000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li { display: inline; }
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em; /*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top:1px solid #CC0001;
}
/* nav me */
.navme ul li { display: inline; }
.navme ul li a {
text-decoration: none;
}
#memberprogram p
{
/* margin: 0; */
}
#footermenu { text-align:left; }
#footernav li { display: inline-block; width: 145px; }
.cartimage
{
vertical-align: middle;
margin-top: -7px;
border-style:none
}
.navbuttons
{
min-height:30px;
}
#navbar ul li {
display: inline;
line-height: 30px;
position: relative;
}
.mega-menu
{
float: left;
z-index:1000;
position: inherit;
text-align:left;
background:#aaaaaa; left: 50%;
margin-left: -327px;
position: absolute;
top: 27px;
width: 654px;
}

Related

Dropdown menu can't open in another browser

I have create sidebar menu with dropdown, dropdown menu is fine with browser that I used to develop website. But when I used another browser dropdown menu can't appear. Also notification menu can't show up when I hover on another browser.
Browser I used is Google Chrome
Here is Sidebar html
<li>Master Data
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li> <i class="fa fa-user"></i> Data Supplier</li>
<li> <i class="fa fa-list"></i> Kategori RPC</li>
<li> <i class="fa fa-list"></i> List Part Alokasi</li>
<li> <i class="fa fa-laptop"></i> Daftar Hardware</li>
<li> <i class="fa fa-dollar"></i> Akun Transaksi</li>
<li> <i class="fa fa-pencil"></i> Business Note</li>
</ul>
</li>
Here is the CSS
/*
* ==========================================================
* SIDEBAR
* ==========================================================
*/
nav.side-navbar {
background: #fff;
min-width: 250px;
max-width: 250px;
color: #686a76;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
z-index: 9;
/*==== Sidebar Header ====*/
/*==== Sidebar Menu ====*/
/*==== Shrinked Sidebar ====*/
}
nav.side-navbar a {
color: inherit;
position: relative;
font-size: 0.9em;
}
nav.side-navbar a[data-toggle="collapse"]::before {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav.side-navbar a[aria-expanded="true"] {
background: #EEF5F9;
}
nav.side-navbar a[aria-expanded="true"]::before {
content: '\f107';
}
nav.side-navbar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav.side-navbar a .badge {
vertical-align: middle;
}
nav.side-navbar .sidebar-header {
padding: 30px 15px;
}
nav.side-navbar .avatar {
width: 55px;
height: 55px;
}
nav.side-navbar .title {
margin-left: 10px;
}
nav.side-navbar .title h1 {
color: #333;
}
nav.side-navbar .title p {
font-size: 0.9em;
font-weight: 200;
margin-bottom: 0;
color: #aaa;
}
nav.side-navbar span.heading {
text-transform: uppercase;
font-weight: 400;
margin-left: 20px;
color: #ccc;
font-size: 0.8em;
}
nav.side-navbar ul {
padding: 15px 0;
}
nav.side-navbar ul li {
/* submenu item active */
}
nav.side-navbar ul li a {
padding: 10px 15px;
text-decoration: none;
display: block;
font-weight: 300;
border-left: 4px solid transparent;
}
nav.side-navbar ul li a:hover {
background: #796AEE;
border-left: 4px solid #3b25e6;
color: #fff;
}
nav.side-navbar ul li li a {
padding-left: 50px;
background: #EEF5F9;
}
nav.side-navbar ul li.active > a {
background: #796AEE;
color: #fff;
border-left: 4px solid #3b25e6;
}
nav.side-navbar ul li.active > a:hover {
background: #796AEE;
}
nav.side-navbar ul li li.active > a {
background: #8e81f1;
}
nav.side-navbar ul li ul {
padding: 0;
}
nav.side-navbar.shrinked {
min-width: 90px;
max-width: 90px;
text-align: center;
}
nav.side-navbar.shrinked span.heading {
margin: 0;
}
nav.side-navbar.shrinked ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
overflow: hidden;
text-overflow: ellipsis;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar.shrinked ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar.shrinked ul li a:hover i {
color: #fff;
}
nav.side-navbar.shrinked ul li a i {
margin-right: 0;
margin-bottom: 2px;
display: block;
font-size: 1rem;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar.shrinked ul li.active > a {
color: #fff;
}
nav.side-navbar.shrinked ul li.active > a i {
color: #fff;
}
nav.side-navbar.shrinked .sidebar-header .title {
display: none;
}
/* SIDEBAR MEDIAQUERIES ----------------------------------- */
#media (max-width: 1199px) {
nav.side-navbar {
margin-left: -90px;
min-width: 90px;
max-width: 90px;
text-align: center;
overflow: hidden;
}
nav.side-navbar span.heading {
margin: 0;
}
nav.side-navbar ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
nav.side-navbar ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar ul li a:hover i {
color: #fff;
}
nav.side-navbar ul li a i {
margin-right: 0;
margin-bottom: 5px;
display: block;
font-size: 1.6em;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar ul li.active > a {
color: #fff;
}
nav.side-navbar ul li.active > a i {
color: #fff;
}
nav.side-navbar .sidebar-header .title {
display: none;
}
nav.side-navbar.shrinked {
margin-left: 0;
}
.content-inner {
width: 100%;
}
.content-inner.active {
width: calc(100% - 90px);
}
}
I used bootstrap and template bootstrapious
Menu can show up when I used browser that I used to develop website
Menu and modal can't show up on another browser

close and open menu on click in mobile view is not working?

I have a mobile menu where user click on caret icon of sub-menus and it open and When user click again on that caret icon it should be closed but it is not working in mobile view.
body {
font-family: 'Poppins', sans-serif;
font-family: FuturaBT-Book, sans-serif;
background-color: #fff;
font-size: 16px;
color: #666;
line-height: 24px
}
.main-top {
color: white;
font-size: 24px;
margin-bottom: 0px;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
a.linktour:link {
color: #666666;
text-decoration: none;
}
.services-details-information .last-section li a.active {
background-color: #fc453e;
border-color: #f64c67;
color: #fff
}
.main-navigation-top {
padding: 15px 60px 15px;
}
.
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a:hover,
.main-navigation-top .navbar-inverse .navbar-nav>li>a:focus {
color: #F30;
}
.main-navigation-top .navbar-inverse .navbar-brand img {
float: left;
margin-right: 15px;
position: relative;
top: -12px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 28px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: #000;
}
.main-navigation-top .navbar-inverse .navbar-brand span {
display: block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
}
.main-navigation-top .navbar-inverse .navbar-nav>.open>a,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:focus,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:hover {
background: none;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: fixed !important;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 10px #f3f3f3;
padding: 30px 20px;
background: #fff;
z-index: 99;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none;
float: left;
width: 100%;
min-height: 110px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li {
line-height: 24px;
background: url(../../img/right-arrow.png) no-repeat left top 8px;
background-size: 9px;
padding: 0px 17px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a {
color: #8a623d;
line-height: 18px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a span {
float: right;
margin-top: 3px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a:hover {
color: #F30;
}
.main-navigation-top .dropdown-menu {
background: none;
border-radius: 0;
box-shadow: none;
border: none;
}
.dropdown-menu {
width: 100%;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 {
min-height: 260px;
padding-bottom: 20px;
}
.header-text h1 {
color: #fff;
font-size: 60px;
font-weight: 700;
text-transform: capitalize;
}
.header-text h1 span {
color: #FF9F1C;
}
.header-text p {
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}
.header-search-form-area input {
display: inline-block;
}
.header-search-form-area input[type="text"] {
background: #fff;
border: none;
color: #000;
font-weight: 400;
padding: 15px;
width: 40%;
}
.header-search-form-area input[type="submit"] {
background: #FF9F1C;
border: none;
color: #fff;
font-weight: 400;
padding: 15px;
width: 10%;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 60px 25px;
z-index: 999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: #fff;
box-shadow: 0 0 10px #f2f2f2;
}
}
.logo {
padding-top: 20px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo img {
width: 150px;
}
.mainmenu .navbar-nav li {
padding: 13px 5px 12px;
}
.mainmenu .navbar-nav li a {
color: #8a623d;
text-transform: capitalize;
font-size: 17px;
padding-right: 0;
padding-left: 0;
padding: 10px 12px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
}
.mainmenu .navbar-nav img {
padding: 10px;
box-shadow: 0 0 10px #f2f2f2;
}
.mainmenu .navbar-nav li a:hover {
background: none;
color: #FF9F1C;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.caret {
background: url(../../img/top-arrow.png) no-repeat right;
border: none;
width: 9px;
height: 6px;
margin-left: 5px;
}
.nav li a:focus,
.nav li a:hover {
background: none;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
#nav-link-hover-bg: #eeeeee;
#nav-tabs-border-color: #dddddd;
#border-radius-base: 5px;
#screen-xs-max: 767px;
//css to add hamburger and create dropdown
.nav-tabs.nav-tabs-dropdown,
.nav-tabs-dropdown {
#media (max-width: #screen-xs-max) {
border: 1px solid #nav-tabs-border-color;
border-radius: #border-radius-base;
overflow: hidden;
position: relative;
&::after {
content: "☰";
position: absolute;
top: 8px;
right: 15px;
z-index: 2;
pointer-events: none;
}
&.open {
a {
position: relative;
display: block;
}
>li.active>a {
background-color: #f5e6d7;
}
}
li {
display: block;
padding: 0;
vertical-align: bottom;
}
>li>a {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
display: inline-block;
border-color: transparent;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
>li.active>a {
display: block;
border-color: transparent;
position: relative;
z-index: 1;
background: #fff;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
}
}
.nav-tabs.nav-justified>li {
width: 0px;
background: #f4f7f9;
border-right: #fff 2px solid;
}
.nav-tabs.nav-justified>li:last-child {
border: none;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 26px;
border-radius: 0px;
color: #000;
border-bottom: none;
}
.nav-tabs.nav-justified>li>a:hover {
background: #f5e6d7;
border-right: #f5e6d7 1px solid;
background: url(../img/tb-arrow.png) no-repeat bottom center;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
background: #f5e6d7;
border: none;
}
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
}
.megamenu .megamenu-content {
padding: 15px;
}
.megamenu .megamenu-content h3 {
margin-top: 0;
color: #428bca;
font-size: 18px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
#media(min-width:120px) and (max-width:767px) {
.main-navigation-top {
padding: 15px;
}
.main-navigation-top .navbar-inverse .navbar-toggle {
border: none;
}
.main-navigation-top .navbar-inverse .navbar-toggle:focus,
.main-navigation-top .navbar-inverse .navbar-toggle:hover {
background: none;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(1) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(3) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(4) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(5) .dropdown-menu .container .col-lg-3 {
min-height: inherit;
padding-bottom: 15px
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
margin-top: 0px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: inherit;
margin: 0 auto;
min-height: inherit;
padding: 15px 0;
}
.navbar-toggle .icon-bar {
width: 32px;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
.header-top-area {
padding: 20px 15px;
}
.navbar-toggle .icon-bar {
background: #8a623d !important;
margin-top: 5px;
}
.services-details-area {
padding: 20px 15px;
}
.nav-tabs.nav-justified>li {
width: 100%;
text-align: center;
}
.nav-tabs.nav-justified>li>a {
padding: 5px 26px;
}
.mainmenu .navbar-nav li {
margin-left: 0px;
}
.caret {
float: right;
margin-top: 11px;
}
.about-services .col-lg-12 {
padding: 20px 15px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 20px;
}
.main-navigation-top .navbar-inverse .navbar-collapse,
.main-navigation-top .navbar-inverse .navbar-form {
border-top: none;
margin-top: 25px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 img {
display: none;
}
}
#media (min-width:767px) and (max-width:1024px) {
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 15px;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 18px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
padding: 10px 10px;
}
.mamm {
padding-left: 15px !important;
padding-right: 15px !important;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
#sidebar {
display: block;
}
#media only screen and (max-width: 550px) {
#sidebar {
display: none;
}
}
#media (max-width: 550px) {
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none !important;
float: none !important;
width: 100% !important;
min-height: 60px !important;
}
h2 {
font-size: 20px;
}
.menuleftbar2 {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-navigation-top">
<div class="row">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<img src="https://www.die-aethiopienreise.de/img/menu-bar.png" width="78">
</button>
<a class="navbar-brand" href="/index.html"> B <span>Studi</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Äthiopien Reisen <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3 style="margin-top:-1px;">Stud</h3>
<ul>
<li>Äthiopien Intensiv <span>24 Tage</span> </li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Äthiopien Informationen<span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3>Reiseinformationen</h3>
<ul>
<li>Wissenwertes</li>
<li>Reisewetter</li>
</ul>
</div>
<div class="col-lg-3">
<h3>Landesinformationen</h3>
<ul>
<li>Nationalparks</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Katalog <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>KatalogDownload</li>
<li>Katalogbestellung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Kontakt <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>Kontakt</li>
<li>Reiseanmeldung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
</ul>
</div>
</nav>
</div>
</div>
drop-down will open now again when user click on the icon it should be closed but it is not working as expected!

Bootstrap - collapsed sidebar by default

I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..

I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}

Responsive menu not working on desktop

I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>

jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.

Read more doesn't work in mobile

I have problem in mobile screen with my Wordpress blog,
read more button doesn't work also the screen size doesn't fit on mobile
abood250.com
Style.css
/* =Global
----------------------------------------------- */
body {
color: #6B6B6B;
word-wrap: break-word;
line-height: 1.7;
font-size: 14px;
direction: rtl;
unicode-bidi: embed;
}
a {
color: #1FA67A;
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
a:hover,
a:focus {
color: #333;
text-decoration: none;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #1FA67A;
}
h1,
.h1 {
font-size: 32px;
}
h2,
.h2 {
font-size: 28px;
}
h3,
.h3 {
font-size: 24px;
}
h4,
.h4 {
font-size: 18px;
}
h5,
.h5 {
font-size: 16px;
}
h6,
.h6 {
font-size: 14px;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
button,
input,
select,
textarea {
font-size: 100%; /* Corrects font size not being inherited in all browsers */
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: baseline; /* Improves appearance and consistency in all browsers */
*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
select {
width: 250px;
border: 1px solid #DCE4EC;
background-color: #FFF;
height: 30px;
padding: 5px;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
color: #666;
border: 1px solid #E8E8E8;
border-radius: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
padding: 3px;
}
textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
padding-right: 3px;
padding-left: 0px;
vertical-align: top; /* Improves readability and alignment in all browsers */
width: 100%;
}
/* Alignment */
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
margin-right: auto;
}
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
margin-left: auto;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto;
}
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
right: 5px;
left: auto;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/* Clearing */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: '';
display: table;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/* =Content
----------------------------------------------- */
.sticky {
}
.hentry {
margin: 0 0 1.5em;
}
.byline,
.updated {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
margin-left: 0;
margin-right: auto;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
#content {
margin-top: 40px;
margin-bottom: 40px;
}
/* =Post styling
----------------------------------------------- */
.entry-meta a {
font-size: 13px;
}
#main .page-header {
margin-top: 0;
}
.entry-meta a {
color: #6B6B6B;
}
.entry-meta .fa {
font-size: 14px;
margin-left: 3px;
margin-right: auto;
color: #1FA67A;
}
.entry-meta span {
margin-left: 10px;
margin-right: auto;
}
.entry-title {
font-size: 32px;
color: #444;
}
.entry-title a {
color: #444;
}
.entry-title a:hover {
color: #666;
}
.btn.btn-default.read-more {
float: left;
border: 1px solid #E8E8E8;
color: #1FA67A;
background-color: transparent;
margin-top: 5px;
margin-Bottom: -40px;
}
.btn.btn-default.read-more:hover {
color: #FFF;
background-color: #1FA67A;
}
.search .btn.btn-default.read-more {
float: none;
}
hr.section-divider {
border-color: #E8E8E8;
margin-top: 80px;
margin-bottom: 50px;
}
.col-sm-6 {
float: right;
}
/* =Singe Post/Page Pagination
----------------------------------------------- */
.page-links span {
display: inline-block;
color: #fff;
background-color: #1FA67A;
border-radius: 4px;
padding: 2px 10px;
margin-right: 2px;
margin-left: auto;
}
.page-links a span {
background-color: inherit;
border: 1px solid #E8E8E8;
color: #1FA67A;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.page-links a:hover span {
background-color: #1FA67A;
border: 1px solid #1FA67A;
color: #fff;
}
/* =Asides
----------------------------------------------- */
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/* =Media
----------------------------------------------- */
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
.wp-caption {
border: 1px solid #ccc;
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
}
.wp-caption-text {
text-align: center;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.site-main .gallery {
margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-main .gallery a img {
border: none;
height: auto;
max-width: 90%;
}
.site-main .gallery dd {
margin: 0;
}
.site-main .gallery-columns-4 .gallery-item {
}
.site-main .gallery-columns-4 .gallery-item img {
}
.thumbnail {
float: right;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
/* =Widgets
----------------------------------------------- */
.widget {
margin: 0 0 1.5em;
}
/* Make sure select elements fit in widgets */
.widget select {
max-width: 100%;
}
/* Search widget */
.widget_search .search-submit {
display: none;
}
.widget > ul > li,
li.recentcomments {
border-bottom: 1px solid #EEE;
position: relative;
display: block;
padding: 10px 0;
}
.widget ul li {
list-style: none;
}
.widget ul {
padding: 10px 10px;
}
.widget-title {
border-bottom: 1px solid #eee;
}
.widget ul.nav.nav-tabs {
padding: 0;
}
.tab-content ul li {
list-style: none;
}
#secondary .widget_archive ul li:before,
#secondary .widget_categories ul li:before,
#secondary .widget_recent_comments ul li:before {
font-family: fontawesome;
margin-left: 10px;
margin-right: auto;
}
#secondary .widget_archive ul li:before {
content: '\f073';
}
#secondary .widget_categories ul li:before {
content: '\f115';
}
#secondary .widget_recent_comments ul li:before {
content: '\f0e5';
}
.tab-content .tab-thumb {
float: right;
margin-left: 8px;
margin-right: auto;
padding-top: 5px;
float: right;
line-height: 0px;
width: 60px;
height: 60px;
}
.tab-content li {
overflow: hidden;
list-style: none;
border-bottom: 1px solid #f0f0f0;
margin: 0 0 8px;
padding: 0 0 6px;
}
.tab-content .tab-entry {
display: block;
}
.tab-content > .active {
border: 1px solid #E8E8E8;
border-top: none;
}
.tab-content ul li:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.tab-content .tab-entry {
font-size: 14px
}
.tab-comment {
font-size: 18px;
padding: 0 10px;
}
.nav-tabs > li > a {
border-bottom-color: transparent;
text-transform: uppercase;
}
.tab-content i {
font-size: 12px;
}
.tab-thumb.thumbnail {
margin-bottom: 5px;
}
.tab-content #messages li:before {
content: '\f0e5';
font-family: fontawesome;
float: right;
padding-left: 10px;
padding-right: 0px;
font-size: 20px;
color: #1FA67A;
}
/* =Buttons
----------------------------------------------- */
.btn-default, .label-default {
background-color: #1FA67A;
border-color: #1FA67A;
}
.btn-default:hover, .label-default[href]:hover, .label-default[href]:focus, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, #image-navigation .nav-previous a:hover, #image-navigation .nav-next a:hover {
background-color: #1b926c;
border-color: #1b926c;
}
.btn.btn-default {
color: #FFF;
}
/* =Infinite Scroll
----------------------------------------------- */
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
display: block;
}
#infinite-handle span {
display: block;
text-align: center;
font-size: 18px;
margin-bottom: 20px;
border-radius: 4px;
padding: 12px;
background: transparent;
border: 1px solid #E8E8E8;
color: #1FA67A;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#infinite-handle span:hover {
background-color: #1FA67A;
color: #fff;
}
.woocommerce #infinite-handle {
display: none;
}
.woocommerce div.product form.cart .variations label {
color: #6B6B6B;
font-size: 14px;
margin-bottom: 0;
margin-top: 8px;
}
/* =Custom Styles
----------------------------------------------- */
.site-branding {
margin-top: 20px;
margin-bottom: 20px;
}
.site-description {
color: #777;
font-weight: 200;
font-size: 16px;
}
.page-template-page-homepage-php .carousel {
margin-top: -20px;
margin-bottom: 20px;
}
/* =Navigation
----------------------------------------------- */
.site-main [class*="navigation"] a,
.more-link {
border: 1px solid #E8E8E8;
padding: 6px 12px;
border-radius: 4px;
display: block;
}
.site-main [class*="navigation"] a:hover,
.more-link:hover {
color: #fff;
background: #1FA67A;
text-decoration: none;
}
.more-link {
float: left;
margin: 10px 0;
}
.site-main [class*="navigation"] {
margin: 0 0 1.5em;
overflow: hidden;
}
[class*="navigation"] .nav-previous {
float: right;
}
[class*="navigation"] .nav-next {
float: left;
text-align: left;
}
.navbar.navbar-default {
background-color: #fff;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
border-bottom: 1px solid #eee;
}
.navbar-default .navbar-nav > li > a {
color: #999;
line-height: 30px;
}
.navbar > .container .navbar-brand {
color: #1FA67A;
font-size: 24px;
margin: 8px 0;
align-self: center;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
border-left: none;
border-right: none;
}
.navbar {
border-radius: 0;
}
.navbar-default {
border: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fff;
background-color: #1FA67A;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #999;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: none;
}
.dropdown-menu > li > a {
padding: 14px 20px;
color: #999;
}
.dropdown-menu,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
border: none;
}
.dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a {
background-color: #1FA67A;
color: #fff;
}
.dropdown-menu .divider {
background-color: rgba(0, 0, 0, 0.1);
}
.navbar-nav > li > .dropdown-menu {
padding: 0;
}
.navbar-nav > li > a {
padding-top: 18px;
padding-bottom: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: transparent;
}
.nav.navbar-nav {
float: right;
}
#media (max-width: 767px) {
.nav.navbar-nav {
float: none;
}
}
/* =Comments
----------------------------------------------- */
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
}
#respond {
background-color: transparent !important;
box-shadow: none !important;
padding: 0px !important;
}
#respond > p, #respond p.comment-notes, p.logged-in-as {
margin-bottom: 10px;
}
p.logged-in-as {
padding-bottom: 0px;
}
.comment-list {
margin-bottom: 40px !important;
margin-right: 0px !important;
padding-left: 0;
padding-right: 0;
margin-left: auto;
}
.comment .comment-body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
padding: 25px;
margin-top: 2em;
padding-right: 116px;
padding-left: 0;
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
border-color: #E8E8E8;
border-radius: 4px;
}
.comment-list .children {
margin-right: 0px!important;
padding-right: 40px;
border-right: 1px solid #E8E8E8;
background-repeat: no-repeat;
background-position: right 20px;
padding-left: 0;
margin-left: auto;
border-left: none;
}
.comment-list li.comment > div img.avatar {
position: absolute;
right: 29px;
left: auto;
top: 29px;
}
#comment-form-title {
font-size: 24px;
padding-bottom: 10px;
}
.vcard .avatar {
position: absolute;
right: 29px;
left: auto;
top: 29px;
}
.comment-metadata {
font-size: 11px;
line-height: 16px;
margin-bottom: 10px;
}
.comment-reply-link {
float: left;
}
.form-allowed-tags code {
word-wrap: break-word;
white-space: inherit;
}
.comment-respond label {
display: block;
font-weight: normal;
}
.comment-respond .required {
color: #C7254E;
}
/* =Attachment styling
----------------------------------------------- */
#image-navigation .nav-previous a,
#image-navigation .nav-next a{
padding: 5px 20px;
border: 1px solid #E8E8E8;
border-radius: 4px;
display: block;
}
#image-navigation .nav-previous a:hover,
#image-navigation .nav-next a:hover{
background-color: #1FA67A;
color: #fff;
}
#image-navigation .nav-previous,
#image-navigation .nav-next {
margin: 10px 0;
}
/* =Footer
----------------------------------------------- */
#footer-area {
background-color: #313233;
color: #CCC;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
#footer-area a {
color: #ccc;
}
#footer-area .footer-widget-area {
padding: 40px 0 20px 0;
overflow: hidden;
}
#footer-area ul li {
border-bottom: 1px solid #444;
}
#footer-area .site-info nav ul li {
border-bottom: none;
}
#footer-area .tab-content > .active {
border: none;
}
#footer-area .nav-tabs > li.active > a, #footer-area .nav-tabs > li.active > a:hover, #footer-area .nav-tabs > li.active > a:focus {
background-color: transparent;
}
#footer-area .tab-content .tab-entry {
font-size: inherit;
}
#footer-area .widgettitle {
font-size: 18px;
color: inherit;
margin-top: 0px;
}
#footer-area #social ul li {
border-bottom: none;
}
#footer-area .widget ul li {
padding: 10px 0;
list-style: none;
}
.footer-nav.nav > li {
position: relative;
display: inline-table;
}
.footer-nav.nav {
float: right;
margin-bottom: 2px;
}
.copyright {
margin-top: 10px;
text-align: center;
width: 100%;
}
#colophon {
background-color: #1F1F1F;
padding: 15px 0;
border-top: 1px solid #3A3A3A;
}
.site-info a {
color: #777;
}
.site-info a:hover {
color: #999;
}
#footer-area a:hover {
color: #fff;
}
.site-info {
color: #999;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 5px;
}
.footer-nav.nav > li > a:hover {
background-color: transparent;
}
.scroll-to-top {
background: #3B3B3B;
background: rgba(0, 0, 0, 0.4);
color: #FFF;
bottom: 4%;
cursor: pointer;
display: none;
position: fixed;
left: 20px;
right: auto;
z-index: 999;
font-size: 16px;
padding: 2px 10px;
border-radius: 4px;
-webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
.scroll-to-top:hover {
background: #1FA67A;
opacity: .8;
}
/* =Mobile Styling
----------------------------------------------- */
#media (max-width: 768px) {
.pull-right {
float: none !important;
}
.pull-left {
float: none !important;
}
.site-info, .copyright {
text-align: right;
}
.footer-nav.nav, .copyright {
float: none;
}
.site-content {
width: 66%;
}
.flex-caption {
display: none;
}
.navbar > .container .navbar-brand {
margin: 0;
}
.navbar-default .navbar-nav > li > a {
line-height: 20px;
padding: 15px 10px;
}
#footer-area {
display: none;
}
}
/* =Social icons
----------------------------------------------- */
.top-bar {
border-bottom-color: #E8E8E8;
}
#social a {
font-size: 32px;
margin: 6px;
color: #E8E8E8;
}
#social {
top: 0;
position: relative;
text-align: center;
}
#social ul li {
list-style: none;
display: inline-block;
padding: 0 10px;
}
#social ul {
margin-bottom: 0;
padding: 0;
}
#social li a span {
display: none;
}
.fa-googleplus:before {
content: "\f0d5";
}
#social li,
#social ul {
border: 0!important;
list-style: none;
padding-right: 0;
padding-left: 0;
}
#social li a[href*="twitter.com"] .fa:before,
.fa-twitter:before {
content: "\f099"
}
#social li a[href*="facebook.com"] .fa:before,
.fa-facebook-f:before,
.fa-facebook:before {
content: "\f09a"
}
#social li a[href*="github.com"] .fa:before,
.fa-github:before {
content: "\f09b"
}
#social li a[href*="/feed"] .fa:before,
.fa-rss:before {
content: "\f09e"
}
#social li a[href*="pinterest.com"] .fa:before,
.fa-pinterest:before {
content: "\f0d2"
}
#social li a[href*="plus.google.com"] .fa:before,
.fa-google-plus:before {
content: "\f0d5"
}
#social li a[href*="linkedin.com"] .fa:before,
.fa-linkedin:before {
content: "\f0e1"
}
#social li a[href*="youtube.com"] .fa:before,
.fa-youtube:before {
content: "\f167"
}
#social li a[href*="instagram.com"] .fa:before,
.fa-instagram:before {
content: "\f16d"
}
#social li a[href*="flickr.com"] .fa:before,
.fa-flickr:before {
content: "\f16e"
}
#social li a[href*="tumblr.com"] .fa:before,
.fa-tumblr:before {
content: "\f173"
}
#social li a[href*="dribbble.com"] .fa:before,
.fa-dribbble:before {
content: "\f17d"
}
#social li a[href*="skype.com"] .fa:before,
.fa-skype:before {
content: "\f17e"
}
#social li a[href*="foursquare.com"] .fa:before,
.fa-foursquare:before {
content: "\f180"
}
#social li a[href*="vimeo.com"] .fa:before,
.fa-vimeo-square:before {
content: "\f194"
}
#social li a[href*="spotify.com"] .fa:before,
.fa-spotify:before {
content: "\f1bc"
}
#social li a[href*="soundcloud.com"] .fa:before,
.fa-soundcloud:before {
content: "\f1be"
}
#media (max-width: 992px) {
.site-branding {
text-align: center;
}
#social {
top: 0;
float: none;
text-align: center;
}
.side-pull-left .main-content-inner, .side-pull-right .main-content-inner{
float: none;
}
}
/* =Call For Action
----------------------------------------------- */
.cfa{
padding: 30px 0px;
background: #1FA67A;
text-align: center;
overflow: hidden;
}
.cfa-text{
font-size: 22px;
color: #fff;
display: block;
padding-top: 10px;
}
.cfa-button {
background-color: transparent;
color: #fff;
padding: 15px 30px;
border-color: #fff;
}
.cfa-button a,
.cfa-button a {
color: #fff;
}
.cfa-button:hover {
background-color: #fff;
color: #1FA67A;
}
.cfa-button:hover a {
color: #1FA67A;
}
/* Layout */
.side-pull-left #primary{
float: left;
}
.side-pull-right #primary{
float: right;
padding-left: 330px;
}
.no-sidebar #secondary, .full-width #secondary{
display: none;
}
.no-sidebar #primary{
float: none;
margin: 0 auto;
}
.full-width #primary{
width: 100%;
}
======================================================================
mobile codes
/* =Mobile Styling
----------------------------------------------- */
#media (max-width: 768px) {
.pull-right {
float: none !important;
}
.pull-left {
float: none !important;
}
.site-info, .copyright {
text-align: right;
}
.footer-nav.nav, .copyright {
float: none;
}
.site-content {
width: 66%;
}
.flex-caption {
display: none;
}
.navbar > .container .navbar-brand {
margin: 0;
}
.navbar-default .navbar-nav > li > a {
line-height: 20px;
padding: 15px 10px;
}
#footer-area {
display: none;
}
}

Remove this CSS.
.side-pull-right #primary {
float: right;
padding-left: 330px;
}
and read bootstrap grid system.
http://getbootstrap.com/css/#grid
PS: in mobile maybe you need to use col-xs- class.

Categories