We Keep Coding

header changing style when uploaded to server

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.

Sub menu closing too fast

The sub menu of a Wordpress site I'm working on closees so fast. But on some users browsers all is fine. The problem is obvious on my part when I go to services -> pets, I can't click anything
http://www.jokerleb.com
The css of the menu
.header_menu_res ul,
.header_menu_res ul ul,
.header_menu_res ul ul ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.header_menu_res ul li.first {
padding-left: 0;
background: none;
}
.header_top .header_top_res p a{
color: #FDC300 !important;
}
/*menu font color*/
.header_menu_res ul li a {
color: #FDC300;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
.header_menu_res ul {
z-index: 99;
margin: 3px;
padding: 0;
list-style: none;
line-height: 1;
}
.header_menu_res ul a {
padding: 5px 10px;
position: relative;
color: #555;
z-index: 100;
display: block;
line-height: 18px;
text-decoration: none;
}
.header_menu_res ul li:hover a {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li.current_page_item,
.header_menu_res ul li.current-menu-item,
.header_menu_res ul li.current-menu-parent a {
color: #555;
background: #f4f4f4;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li li.current_page_item,
.header_menu_res ul li li.current-menu-item {
background: none;
}
.header_menu_res ul li.current_page_item a,
.header_menu_res ul li.current-menu-item a {
color: #555;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.children li a {
background: #fff;
border-top: none;
border-left: none;
}
.header_menu_res ul li {
float: left;
/
font: normal 14px/1.2em Arial, Helvetica, sans-serif;
z-index: 999;
margin: 0 0 20px;
width: 25%;
}
.menu-item i._mi, .menu-item img._mi {
display: block;
float: left;
}
.menu-item span {
margin-top: 8px;
display: block;
margin-left: 60px;
}
.header_menu_res ul li ul {
margin-top: -2px;
background: #fff;
position: absolute;
left: -999em;
width: 180px;
border: 1px solid #dbdbdb;
border-width: 1px 1px 0;
z-index: 998;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu ul ul.children {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu li ul li {
margin: 0;
padding: 0px;
}
.header_menu_res ul.menu li ul li a {
background: none;
padding: 7px 12px;
width: 156px;
color: #555;
font-size: 14px;
line-height: 18px;
}
.header_menu_res ul.menu li ul li a:hover {
text-decoration: underline;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.menu li ul ul {
margin: -32px 0 0 181px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul.sub-menu {
display: none;
position: absolute;
margin: -2px 0 0;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {
display: none;
top: 2px;
left: 180px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul li:hover,
.header_menu_res ul li.hover {
position: static;
color: #555555;
}
.header_menu_res ul li:hover ul ul,
.header_menu_res ul li:hover ul ul ul,
.header_menu_res ul li:hover ul ul ul ul {
left: -999em;
}
.header_menu_res ul li:hover ul,
.header_menu_res ul li li:hover ul,
.header_menu_res ul li li li:hover ul,
.header_menu_res ul li li li li:hover ul {
left: auto;
}
.header_menu_res ul li img.dropdown {
padding: 2px 0 2px 8px;
border: none;
}
.header_menu_res ul.sub-menu {
width: auto;
}
.header_menu_res ul.sub-menu li {
clear: left;
margin: 8px 4px 0;
}
/* category menu */
div#adv_categories,
.header_menu_res ul.sub-menu {
margin: -2px 0 0 0;
padding: 0 0 8px;
position: absolute;
background: #fff;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
div#adv_categories {
display: none;
padding: 0 5px 8px;
}
#menu-header li:hover #adv_categories,
.header_menu .menu li:hover #adv_categories {
display: block;
}
Since Wordpress generates way too much css and I'm sure where's the problem since some people say all is fine; I tried the jquery snippet from here but still doesn't work, I tried with different id's and classes. Perhaps I'm targeting the wrong class. The original snippet from the other question
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide();
}, 1000);
});

Please define speed for hide() and show()
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Try below code jquery:
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide(500);
}, 1000);
});
https://www.w3schools.com/jquery/jquery_hide_show.asp

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;
}

2 level responsive menu doesn't display block

I'm trying to make my old menu responsive for smaller screen sizes. I get the menu icon working properly, but when I open the list it displays inline instead of block. I tried several options but could not get it work right.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu.responsive li {
float: none;
display: inline;
}
ul.menu.responsive li a {
display: block;
text-align: left;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

You have to put display: block; on the li.
Also, don't forget to remove the set float: none; on the a elements.
I added a z-index on the icon to be able to close it even if you were over the first element.
This may help you :
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
}
ul.menu.responsive li {
float: none;
display: block;
}
ul.menu.responsive li a {
display: block;
text-align: left;
float: none;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

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.