I have built a website, but its acting funky in Safari with the menu. Please see the following video, where i show the problem. Its only in Safari, all other browsers its working perfectly fine
Video of the problem in Safari can be seen here https://vimeo.com/757367403
Here is my CSS, anybody know a trick or two to fix this problem ?
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.elementor-nav-menu {
align-items: center;
}
.elementor-nav-menu * {
font-family: "Lato", sans-serif !important;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
font-size:16px!important;
padding: 15px 0px!important;
}
.elementor-nav-menu > li:first-child {
background-color: #00aeef;
zoom: 0.85;
}
.elementor-nav-menu > li:nth-child(2n) {
background-color: #ef6500!important;
width:170px!important;
height:170px!important;
zoom:0.9!important;
}
.elementor-nav-menu > li a {
flex-grow: 0!important;
}
.elementor-nav-menu > li:nth-child(7n) {
background-color: #e8b736!important;
zoom:0.85;
}
.elementor-nav-menu > li:nth-child(3) {
background-color: #e8b736!important;
width:220px;
height:220px;
padding:0 10px!important;
}
.elementor-nav-menu > li:nth-child(4n) {
background-color: #66cc9a!important;
zoom:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4n) {
background-color: #66cc9a!important;
zoom:1.05!important;
padding:0 0px!important;
}
.elementor-nav-menu > li:nth-child(4) {
margin:0 auto;
}
.elementor-nav-menu > li:nth-child(5n){
background-color: #00aeef;
zoom:1.1;
}
.elementor-nav-menu > li:nth-child(6) {
width:180px!important;
height:180px!important;
}
.elementor-nav-menu > li:nth-child(5) {
width:170px!important;
height:170px!important;
}
.elementor-nav-menu > li {
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 50%;
background-size: cover;
background-repeat: none;
width:139px;
height:139px;
text-align:center;
margin:0 10px!important;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}
.elementor-nav-menu > li a {
color:#fff!important;
font-size: 18px!important;
word-wrap: break-word!important;
word-break: break-word!important;
white-space: normal!important;
line-height:26px;
text-align:center;
}
.elementor-nav-menu > li a:hover {
line-height:30px;
}
.elementor-nav-menu li a .sub-arrow {
display:none;
}
.elementor-nav-menu > .sub-menu:nth-child(3) {
background-color:red;
}
.elementor-nav-menu--dropdown li a {
justify-content: center;
}
.elementor-nav-menu--dropdown {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
will-change: filter;
}
.elementor-nav-menu > li:nth-child(2) ul {
width: 300px!important;
margin-top: 55px!important;
background-color: #ef6500!important;
}
.elementor-nav-menu > li:nth-child(3) ul {
width: 300px!important;
background-color: #e8b736!important;
margin-top: 13px!important;
}
.elementor-nav-menu > li:nth-child(4) ul {
width: 300px!important;
margin-top: 55px!important;
background-color: #66cc9a!important;
}
.elementor-nav-menu > li:nth-child(4) ul {
width: 300px!important;
margin-top: 50px!important;
}
.elementor-nav-menu > li:nth-child(5) ul {
width: 300px!important;
margin-top: 25px!important;
}
.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
background-color: transparent!important;
text-decoration: underline!important;
}
Try to add
-webkit-appearance: none;
Related
I'm trying to change the colors of my menu bar, making them black just like it shows up in here with the 3 horizontal black bars at the top right in the figure below. However, I don't know what to look for in my CSS. What field controls it?
Edit: adding my code here to facilitate
/*
* .scss template
*/
nav {
background-color: #f5f5f5;
ul a {
color: $textgray;
img {
height: 64px;
}
}
ul li {
list-style-type: none;
}
i.right {
float: right;
margin-left: -5px;
}
.navlogo img {
height: 64px;
padding: 5px;
}
.navlogo:hover {
background-color: rgba(0, 0, 0, 0.0);
}
}
#toc-sidebar {
#media screen and (min-width: 992px) {
position: absolute;
top: 85px;
right: 23px;
width: 22%;
}
#media screen and (max-width: 992px) {
display: none;
}
&.fix-scroll {
position: fixed;
top: 7px;
}
padding: 3px;
a {
color: #666
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
ul {
li {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
margin-bottom: 0px;
.selected {
font-weight: bold;
}
.H1 {
margin-left: 0px;
}
.H2 {
margin-left: 10px;
}
.H3 {
margin-left: 20px;
}
}
}
.content {
background-color: dark;
padding-bottom: 64px;
margin-bottom: 64px;
ul {
margin-left: 1.2rem;
li {
list-style-type: disc;
}
}
dl {
margin-left:10px;
}
}
.dropdown-content li > a, .dropdown-content li > span {
color: $textgray;
}
h3 {
code {
font-size: 2.5rem;
}
}
#media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
.material-icons {
font-size: inherit;
}
}
footer.page-footer {
margin: 0;
background-color: #f5f5f5;
}
.row {
a {
color: blue;
}
}
code {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
font-size: 13px;
color: #333;
background: #efefef;
border: 1px solid #c7c7c7;
border-radius: 2px;
padding: 0px 1px;
}
pre {
color:#efefef;
background: #333;
padding:8px 15px;
border-radius: 3px;
border:1px solid #c7c7c7;
overflow: auto;
overflow-y: hidden;
code {
color:#efefef;
background: #333;
text-shadow: 0px 1px 0px #000;
margin: 0px;
padding: 0px;
border: none;
}
}
.center-image {
margin: 0 auto;
display: block;
}
table {
line-height: 1.0rem;
}
table.border {
thead {
border-bottom: none;
}
tbody {
border: 1px solid black;
}
}
html {
font-size: 90%;
}
body {
background: #ffffff;
color: $textgray;
line-height: 1.6;
}
.bread {
padding-top: 48px;
margin: 48px;
ul {
margin-left: 1.2rem;
li {
list-style-type: disc;
}
}
dl {
margin-left:10px;
}
}
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.transition,.play {
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
-webkit-transition-timing-function: cubic-bezier(.4,0,.5,1);
-moz-transition-timing-function: cubic-bezier(.4,0,.5,1);
transition-timing-function: cubic-bezier(.4,0,.5,1);
}
.nodec a {
font-weight:normal;
text-decoration:none;
color:#444;
}
.topborder {
border-top-style: solid;
border-color: $textgray;
border-width: 2px;
}
.bottomborder {
border-bottom-style: solid;
border-color: $textgray;
border-width: 2px;
}
.button-collapse {
color: #textgray;
}
.compact td {
padding: 5px;
}
.panel-info {
border: 1px solid black;
.panel-heading {
background-color: $textgray;
color: white;
h3 {
font-size: 2rem;
margin-top: 0px;
}
}
.panel-body {
padding-left: 1em;
.row {
margin-bottom: 5px;
}
ul {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2rem;
}
}
}
thanks in advance
You can add this to your CSS and append the class of your navbar and alter the below code to make it dark.
<style>
/* Modify the background color */
.navbar-custom {
background-color: dark;
}
/* Modify text color */
.navbar-custom .navbar-text {
color: white;
}
</style>
This is a basic hamburger-menu:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
<p>A menu icon:</p>
<div></div>
<div></div>
<div></div>
From: https://www.w3schools.com/howto/howto_css_menu_icon.asp
Just change the background-color to your color
(I'm not sure whether this answers your question - I'm sorry if not)
My problem is this menu, which I can not make responsive for all resolutions. Maybe you know how to edit it better, I can't manage this menu in order to be responsive (position, size and text size). I want to make size and position responsive in percent or other solution. Thank you very much, I'm waiting for your help.
Demo codepen
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
width:100%;
BACKGROUND-COLOR: RED;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000%;
-moz-perspective: 1000%;
perspective: 1000%;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #c61515;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
font-weight: bold; color: #000000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #19799f;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #3db2e1;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #dff2fa;
border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #dff2fa;
}
If you are using WordPress, it is better to use some plugin for responsive menu, but if insist not to do that, you should use #media queries. Look at this:
https://codepen.io/anon/pen/QpwRwr
I changed this codes:
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'><span>FORUM</span></a></li>
<li><a href='#'><span>SERVERE</span></a></li>
<li><a href='#'><span>ASISTENTA</span></a></li>
</ul>
and added this:
#media only screen and (max-width: 479px) {
#content ul li span {font-size: 11px}
#cssmenu ul li {width:25% }
#cssmenu ul li a {padding: 16px 10px 16px 10px}
}
This changes make it a little more responsive but the point is in using media queries, use it and build the layout you like. But in the case of WordPress, look at this plugin too.
I have a side bar called column left. for some reason it does not go the full height of page when I have extra panels on view.
I use bootstrap with it as well with a fixed navbar at top.
Question: Why is it side bar "column left" not going full height what every page size is. What would be the best solution to solve it?
Codepen preview
Code View http://codepen.io/riwakawebsitedesigns/pen/bdaGro/
Full View http://codepen.io/riwakawebsitedesigns/full/bdaGro/
#import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
/* Global */
body {
/*height: 100%;*/
margin: 0;
/*min-height: 100% !important;*/
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
}
#user-bar-chart {
height: 300px;
}
#client-bar-chart {
height: 300px;
}
a,
a:hover,
a:focus {
cursor: pointer;
text-decoration: none;
}
tr:hover a.dashboard-user:after {
font-family: FontAwesome;
content: "\f044";
font-size: 14px;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/* Layout */
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
#content {
padding-bottom: 40px;
transition: all 0.3s;
}
/* Column Left */
#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: absolute;
top: 0px;
padding-top: 100px;
z-index: 10;
transition: all 0.3s;
}
#column-left + #content {
margin-left: 50px;
}
#column-left + #content + #footer {
margin-left: 50px;
}
#media (max-width: 767px) {
#column-left {
overflow: hidden;
display: none;
}
#column-left + #content {
margin-left: 0;
}
#column-left + #content + #footer {
margin-left: 0;
}
}
/* Column Left Active */
#column-left.active {
width: 235px;
display: block;
}
#media (min-width: 768px) {
#column-left.active {
overflow: auto;
}
#column-left.active + #content {
margin-left: 235px;
}
#column-left.active + #content + #footer {
margin-left: 235px;
}
}
#media (max-width: 767px) {
#column-left.active + #content {
position: relative;
left: 235px;
}
#column-left.active + #content + #footer {
position: relative;
left: 235px;
}
}
#column-left.active {
width: 235px;
}
#column-left.active #menu li i {
font-size: 14px;
}
#column-left.active #menu > li > a > span {
display: inline;
}
#column-left.active #menu > li > ul {
position: relative;
left: auto;
top: auto;
width: auto;
visibility: visible;
}
/* Top Navbar */
.menu {
background: #eeeeee none repeat scroll 0 0;
}
.navbar {
background-color: #fff !important;
border: 0 none;
border-radius: 0;
color: #666;
margin-bottom: 0;
}
.navbar.navbar-shadow {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}
#button-menu {
display: inline-block;
cursor: pointer;
color: #6D6D6D;
}
#media (max-width: 640px) {
.navbar-brand {
font-size: 14px;
padding: 15px 7px;
}
}
/* Sidebar Menu */
#menu,
#menu ul,
#menu li {
padding: 0;
margin: 0;
min-height: 100%;
list-style: none;
}
#menu {
margin-bottom: 25px;
}
#menu > li {
position: relative;
}
#menu li a {
text-decoration: none;
display: block;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #515151;
}
#menu li a i {
font-size: 16px;
}
#menu > li > a {
color: #C4C4C4;
font-size: 14px;
padding-left: 13px;
border-bottom: 1px solid #585858;
}
#menu > li > a:hover {
background-color: #444444;
}
#menu > li > a > span {
display: none;
margin-left: 8px;
}
#menu li li a {
color: #9d9d9d;
}
#menu li li a:hover {
color: #FFFFFF;
background-color: #373737;
}
#menu li li a:before {
content: "\f101";
font-size: 14px;
font-family: FontAwesome;
margin-left: 10px;
margin-right: 10px;
transition: margin ease 0.5s;
}
#menu li li a:hover:before {
margin-right: 20px;
}
#menu > li.active > a {
color: #DDDDDD;
background: #373737;
}
#menu li.active li a {
color: #C4C4C4;
}
#menu li li.active > a:last-child {
color: #FFFFFF;
}
#menu li li.active a:last-child:before {
margin-left: 20px;
margin-right: 10px;
}
#menu > li > ul {
position: absolute;
left: 50px;
top: 0px;
width: 210px;
background-color: #444444;
visibility: hidden;
}
#menu li ul {
overflow: hidden;
}
#menu > li:hover > ul {
visibility: visible;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul a {
padding-left: 20px;
}
#menu li li ul a {
padding-left: 40px;
}
#menu li li li ul a {
padding-left: 60px;
}
#menu li li li li ul a {
padding-left: 80px;
}
/* Panels */
.panel {
border-radius: 0px;
}
.panel .panel-heading {
position: relative;
}
.panel-heading h3 i {
margin-right: 8px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.panel-heading i {
font-size: 16px;
font-weight: 500;
}
.panel-heading h3 {
font-size: 16px;
font-weight: 500;
display: inline-block;
}
/* Primary Panel */
.panel-primary {
border: 1px solid #c3e4f6;
border-top: 2px solid #5cb7e7;
}
.panel-primary .panel-heading {
color: #1e91cf;
border-color: #96d0f0;
background: white;
}
/* Default Panel */
.panel-default {
border: 1px solid #e8e8e8;
border-top: 2px solid #bfbfbf;
}
.panel-default .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}
/* Info Panel */
.panel-info {
border: 1px solid #e8e8e8;
border-top: 2px solid #3c8dbc;
}
.panel-info .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}
I believe that adding 'position:fixed;' to your #column-left should do the trick.
In that case no matter how large/long your content is, the sidebar will always remain at 100% height of viewport, fixed at the left side of the screen.
div#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: fixed;
top: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
Set your body as position: relative if you want your left column to take the full height of your page. I would also explicitely set your column to take full height by removing your min-height and setting top: 0; bottom:0; on your column:
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
position: relative;
}
#column-left {
width: 50px;
background-color: #515151;
position: absolute;
top: 0px;
bottom: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
It is actually 100% of the height of the viewport. (Not 100% of the page length).
What you can do:
#column-left { position: fixed; }
use display: table-cell on #column-left and #content
use flexbox (depending on if you have to support old browsers)
I'm not sure if it matters that it follows when you scroll the page, but you could make it position:fixed.
Perhaps that's an easy fix for you
This is code i tried:
*
{
box-sizing:border-box;
}
div,body,html,h1,nav,article,footer,header{display:block;}
body
{
margin:0;
padding:0;
font-family:Arial;
font-size:14px;
background-color:#fff;
}
#wrapper
{
margin-left: auto;
margin-right: auto;
}
.title p
{
text-align:center;
color:darkgray;
}
img
{
vertical-align:middle;
margin:0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#fixme
{
height : 65px;
position: relative;
overflow : hidden;
}
#animate-area
{
height: 122%;
width: 2538px;
position: absolute;
left: 0;
top: -15px;
background-image: url('http://s30.postimg.org/qnju89rkx/banner.png');
background-repeat: repeat-x;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#logo img
{
position:absolute;
z-index:999;
vertical-align:middle;
margin-top: -22px;
}
h1
{
text-align:center;
text-align: center;
font-size: 35px;
font-weight: 100;
margin-top:25px;
margin-bottom: inherit;
}
.header-pgf
{
width: 67%;
font-size: 15px;
font-family: verdana;
margin: auto;
margin-top:15px;
}
.title
{
margin-right:auto;
margin-left:auto;
width:960px;
}
.nav
{
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#000));
background: linear-gradient(0deg, red, yellow);
height:45px;
margin-top: -15px;
}
.nav ul
{
text-align:center;
}
.nav ul li
{
display:inline-block;
text-align:center;
}
.nav > ul li:first-child a
{
background-color:Red;
}
.nav > ul li:first-child a:hover
{
text-decoration:underline;
}
.nav li:hover a
{
background-color: red;
}
.nav li a
{
color: #000;
display: block;
padding: 14px 25px;
text-decoration: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav
{
margin: 0;
padding: 0;
list-style: none;
}
.flexslider .slides img
{
width: 960px;
margin-left:auto;
margin-right:auto;
display: block;
}
.flex-pauseplay span
{
text-transform: capitalize;
}
.flexslider .slides > li
{
display: none;
-webkit-backface-visibility: hidden;
}
.slides:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides
{
display: block;
}
* html .slides
{
height: 1%;
}
.flexslider
{
border: 4px solid #fff;
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;
margin-top: 20px;
}
.flex-viewport
{
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport
{
max-height: 200px;
}
.flexslider .slides
{
zoom: 1;
}
.flexslider .slides
{
border-right:10px;
}
.flex-direction-nav
{
*height: 0;
width:400px !important;
}
.flex-direction-nav a
{
width: 60px;
height: 60px;
display: block;
no-repeat 0 0;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 1;
-webkit-transition: all .3s ease;
}
.flex-direction-nav .flex-disabled
{
filter:alpha(opacity=20);
cursor: default;
}
.flex-control-nav
{
width: 100%;
bottom: -40px;
text-align: center;
float:left;
margin-top:-200px;
}
.flex-control-nav
{
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
font-weight:bold;
color:darkgray;
cursor:pointer;
}
.flex-control-nav li
{
margin: 0 6px;
display: inline-block;
zoom: 2;
}
.flex-control-nav li:hover
{
color:#000;
}
.flex-control-nav .flex-active
{
cursor: default;
color:#000;
opacity: .7;
}
.column-layout
{
padding-top: 73px;
display: table;
margin: 0 auto;
max-width: 1300px;
}
section
{
padding: 0px 40px;
}
.column-layout p
{
color: darkgray;
}
.column-layout h3, .column-layout img
{
margin-left: 40px;
}
#media (min-width: 992px){
.column-count-1, .column-count-2, .column-count-3, .column-count-4 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
}
.column-count-1, .column-count-2, .column-count-3, .column-count-4 {
width: 25%;
float: left;
line-height: 1.5em;
letter-spacing: 0.4pt;
}
.featured
{
background-color: darkgray;
color:#fff;
padding:10px;
display: flex;
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.featured-pgf
{
float:left;
clear:both;
}
input[type=text] {
border-radius:0px;
padding: 14px 18px 14px 18px;
margin-left: 151px;
margin-top: 8px;
width: 260px;
}
form
{
float:right;
margin:0;
}
.footer-link
{
background-color: darkgray;
line-height: 9pt;
padding: 20px 0px;
margin-top: 55px;
padding-left: 47px;}
.footer-link a:first-child
{
border-left: 0px;
}
.footer-link
{
text-align:center;
}
.footer-link a
{
color: #fff;
border-left: 1px solid #fff;
font-size: 9pt;
line-height: 9pt;
display: inline-block;
text-decoration: none;
padding: 0px 0px 0px 10px;
}
.footer-link a:hover
{
color:#fff;
text-decoration:underline;
}
#footer
{
width:960px;
margin-left:auto;
margin-right:auto;
}
.copyright
{
margin-left: 33px;
font-size: 11px;
color: darkgray;
float:left;
}
#footer img
{
vertical-align:middle;
float:right;
margin: 4px;
}
This is JSfiddle:
http://jsfiddle.net/6deqxyk4/
When resize the window, it will shows like this: http://s27.postimg.org/5p20dklg3/Untitled_1_copy.png
May i know how to align the page when resizing the window, I need to display centring all the content of page.
Mostly i tried, but somewhat missing, please help with my errors.
Any help would be appreciated. Thanks in advance.
Something like this
.wrapper{
width:900px;
margin-left:auto;
margin-right:auto;
}
#header{
width:100%;
// give it orange background here
}
#footer{
width:100%;
// give it background here
}
<div id="header">
<div class="wrapper">
// navigation bar here
</div>
</div>
<div class="wrapper">
// page content here
</div>
<div id="footer">
<div class="wrapper">
// navigation bar here
</div>
</div>
In your html file add a div like http://jsfiddle.net/6deqxyk4/3/
<div id="page">
begin this at the beginning of your content and close it at the end of all content
Then add this to your css
#page{
width:980px;
margin:auto;
}
this will solve it
I want to add smooth animated transition to drop down in this CSS. Which code and where I should place? I have tried some "webkit-transition" variants but none worked with my skills in programming. Anyone can solve this problem?
ul.jb_free_dropdown,
ul.jb_free_dropdown li,
ul.jb_free_dropdown ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul.jb_free_dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.jb_free_dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.jb_free_dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.jb_free_dropdown ul li {
float: none;
}
ul.jb_free_dropdown ul ul {
top: 0px;
left: 100%;
}
ul.jb_free_dropdown li:hover > ul {
visibility: visible;
}
/* -- Base drop-down styling -- */
ul.jb_free_dropdown {
font-weight: bold;
}
ul.jb_free_dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover,
ul.jb_free_dropdown li.on {
background-color: #eee;
color: #000;
}
ul.jb_free_dropdown a:link,
ul.jb_free_dropdown a:visited { color: #000; text-decoration: none; }
ul.jb_free_dropdown a:hover { color: #000; background-color: #ececec;}
ul.jb_free_dropdown a:active { color: #000; }
/* -- level mark -- */
ul.jb_free_dropdown ul {
width: 200px;
margin-top: 1px;
}
ul.jb_free_dropdown ul li {
font-weight: normal;
}
ul.jb_free_dropdown a,
ul.jb_free_dropdown span {
display: block;
padding: 10px 20px;
background-color: #ffffff;
background-repeat: repeat-x;
}
/* -- Base style override -- */
ul.jb_free_dropdown li {
padding: 0;
border: none;
}
/*
JB
*/
ul.jb_free_dropdown li li.parent a {
background: #f4f4f4 url('../../media/images/arrow.png') right 10px no-repeat;
}
ul.jb_free_dropdown li li.parent li a {
background: #f4f4f4;
}
ul.jb_free_dropdown li.parent a:hover {
background-color: #ececec;
}
ul.jb_free_dropdown li.active a {
background-color: #fff;
}
ul.jb_free_dropdown li.active li a {
background-color: #f4f4f4;
}
ul.jb_free_dropdown li.active li a:hover {
background-color: #ececec;
}
/*
JB
*/
ul.jb_free_dropdown ul a,
ul.jb_free_dropdown ul span {
padding: 8px;
}
/* -- Base style reinitiate: post-override activities -- */
/* -- Custom styles -- */
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
background: url(../../../../images/default/grad2.png) 0 100% repeat-x;
color: #000;
background-color: #fff;
}
ul.jb_free_dropdown li:hover {
color: #fff;
}
ul.jb_free_dropdown li a:active {
background: url(../../../../images/default/grad1.png) repeat-x;
}
ul.jb_free_dropdown ul {
margin-top: 0;
}
/* -- Mixed -- */
ul.jb_free_dropdown li a,
ul.jb_free_dropdown *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
}
/* -- Drop-down open -- */
Usually the transition effects would accompany the parent css selector, and the resultant of "where you want to end up" would be on the :hover selector.
I have used this in the past and it works well across browsers:
css
.view .mask {
-webkit-transform: translatex(0) translatey(100px);
-moz-transform: translatex(0) translatey(100px);
-o-transform: translatex(0) translatey(100px);
-ms-transform: translatex(0) translatey(100px);
transform: translatex(0) translatey(100px);
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
-o-transition: all .8s ease-out;
-ms-transition: all .8s ease-out;
transition: all .8s ease-out;
}
.view:hover .mask {
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
-ms-transform: translatey(0);
transform: translatey(0);
}