So I making a menu for a website, whenever the website loads the menu looks like img#1, the icons on the side are stacked, which I don't want to.
img1
After you hover over the icons they stack properly img#2.
after hovering
Which is how I actually want it.
I am sure it's just something small but I can't figure it out?
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right:auto;
padding-left:4%;
width:fit-content;
}
nav li {
display: inline;
padding-right:5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
.icon-nav{
margin-left:auto;
padding-right:4%;
}
.icon-nav a{
padding: 0 5%;
}
html
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</nav>
Your problem is likely related to a problem in your layout of .icon-nav and it's padding.
Some ways you can fix this is by:
Adding :not(:last-child) in the .icon-nav a CSS selector making it:
.icon-nav a:not(:last-child) {
padding: 0 5%;
}
OR
Adding:
First, adding width: 15%; to .icon-nav.
Second, sdding width: 75%; to .main-nav.
and adding a .icon-nav::before { content: ""; width: 15%; display: inline-block;}
/******* EXTRA *******/
#screen{
resize:horizontal;
overflow:hidden;
background-image: url('data:image/svg+xml;utf8, <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" ><rect x="0" y="0" width="10" height="10" fill="lightgrey"/><rect x="10" y="10" width="10" height="10" fill="lightgrey"/></svg>');
}
/*********************/
/********** Things forgotten **********/
html {
--main-bg-color: black;
--light-color: red;
--font-h: /*monospace*/
;
}
ul {
display: inline;
list-style-type: none;
}
#screen div {
display: inline-block;
height: 1em;
}
#screen div * {
border-width: 0;
}
/**************************************/
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right: auto;
padding-left: 4%;
width: fit-content;
/* ADDED { */ width: 70%; /* } */
}
nav li {
display: inline;
padding-right: 5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
/*= ADDED =======================*/
.icon-nav::before {
content: "";
width: 15%;
display: inline-block;
}
/*===============================*/
.icon-nav {
margin-left: auto;
padding-right: 4%;
/* ADDED {*/ width: 15%; /* } */
}
.icon-nav a {
padding: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="screen">
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
</div>
</nav>
</div>
</body>
</html>
Related
I'm pretty new to using css and html. I don't know why the nav part doesn't have the same background and it's not at the same height as the logo.
I'd really appreciate the help!
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
What I've done is following:
header {
display: flex;
justify-content: space-between;
align-items:center;
}
and removed display: block; from nav a
Hopefully this makes sense and it doesn't need explanation. If yes, tell me, I will explain it to you.
This way, it's fixed. Full code:
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
header {
display: flex;
justify-content: space-between;
align-items:center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
you can use flex with space between and align item center.
* {
border: 1px solid red;
}
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
I have a problem linking html(<li class="active"></li>) to icons and I do not know how to make icons different color after I click on them (color of an icon is black, when I click on an icon it does not stay white). I tried another way to get html in but then the animation did not work. I looked at millions of pages and I could not find an answer. On top of that, I am new to coding.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul
{
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li
{
list-style: none;
text-align: center;
display: block;
}
ul li:last-child
{
border-right: none;
}
ul li a
{
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon
{
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa
{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .icon .fa:last-child
{
color: #eeeeee;
}
ul li a:hover .icon .fa
{
transform: translateY(-100%);
}
/*
ul li a .name
{
position: relative;
height: 20px;
width: 100%;
display: block;
overflow: hidden;
}
ul li a .name span
{
display: block;
position: relative;
color: #000;
font-size: 18px;
line-height: 20px;
transition: 0.5s;
}
ul li a .name span:before
{
content: attr(data-text);
position: absolute;
top: -100%;
left 0;
width: 100%;
height: 100%;
color: #eeeeee;
}
ul li a:hover .name span
{
transform: translateY(20px);
}
*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<ul>
<div>
<ul>
<li class="active"></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Home">Home</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="About">About</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Contact">Contact</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Settings">Settings</span></div> -->
</a>
</li>
</ul>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I doubt you can solve this issue with a css-only solution - I might be wrong though.
Nevertheless you can do it with some Javascript trickery which goes a little like this:
layer an additional icon on top of your current icons, give it the desired color e.g. red and make it invisible by setting it's css opacity property to 0
attach a click event listener to the freshly created icons
inside the callback handler reset the opacity of all the red active icons to 0, reset the opacity of all the icons below (those that are used for the CSS animation effect) to 1, make the clicked icon visible and finally the two icons in the background invisible.
Here's an example (just click on 'Run code snippet'):
var buttons = document.getElementsByClassName("active");
buttons[0].addEventListener("click", clicked);
function clicked(e) {
var iconsToShow = document.querySelectorAll(`[class*="icon"]`);
iconsToShow.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.style.opacity = 1;
});
var iconsToHide = document.querySelectorAll(`[class*="active"]`);
iconsToHide.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.firstElementChild.style.opacity = 0;
});
var iconToHide = e.target.parentElement.parentElement.querySelectorAll(`[class*="icon"]`)[0];
iconToHide.style.opacity = 0;
e.target.style.opacity = 1;
}
for (var a = 0; a < buttons.length; a++) {
buttons[a].addEventListener("click", clicked);
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul {
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li {
list-style: none;
text-align: center;
display: block;
}
ul li:last-child {
border-right: none;
}
ul li a {
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon {
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa {
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .active .fa {
font-size: 40px;
transform: translateY(-250%);
color: #ff0e12;
opacity: 0;
}
ul li a .icon .fa:last-child {
color: #eeeeee;
}
ul li a:hover .icon .fa {
transform: translateY(-100%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<ul>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a class="button">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</body>
So I am trying to make my website project responsive for mobiles and tablets. More specifically, I am trying to get it so the margin between the navigation buttons reduces when on smaller screens to ensure they all stay on the same line.
I have managed to figure out that you would use the meta tag;
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What I can't figure out is the CSS to actually style the buttons using the viewpoint tag... I have included some code, hopefully someone can help me out? :D
<!-- NAVAGATION BAR -->
<ul class="navbar">
<li><a href="index.html" src="index.html">
<div class="waterMark" title="Home Page">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
</a>
</li>
<li><a href="about.html" src="about.html">
<div class="waterMark" title="About Me">
<i class="fa fa-user-circle" aria-hidden="true"></i>
</div>
</a>
</li>
<li><a href="gallery.html" src="gallery.html">
<div class="waterMark" title="My Gallery">
<i class="fa fa-picture-o" aria-hidden="true"></i>
</div>
</a>
</li>
<li><a href="partners.html" src="partners.html">
<div class="waterMark" title="My Partners">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
</a>
</li>
<li><a href="contact.html" src="contact.html">
<div class="waterMark" title="Contact Me">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</div>
And the CSS;
/* NAVAGATION BAR */
.navbar {
min-width: 100%;
margin-right: 10px;
margin: auto;
font-size: 30px;
font-weight:bold;
list-style: none;
padding: 0px;
color: #566573;
bottom: 5px
}
.navbar > li {
display: inline-block;
}
.navbar > li > a {
margin: auto;
text-decoration: none;
color: #566573;
}
.navbar > li > a:hover {
color: white;
text-shadow: none;
}
.waterMark {
margin-left: 20px;
margin-top: 10px;
text-align: center;
width: 45px;
height: 45px;
background-color: transparent;
padding: 0px;
border-style: solid;
border-color: #566573;
border-width: 4px;
border-radius: 50px 50px 50px 50px;
}
You just need to add some code in the CSS. At first select the width you want and write code. I am selecting 600px as an example. So when the devices width is 600px the margin between buttons() should be reduced at 5px.
#media screen and (max-width: 600px) {
.navbar li a{
margin: 5px;
}
}
You can target specific widths using media queries like so:
#media only screen and (min-width: 500px) {
body {
background-color: lightblue;
}
}
This question already has an answer here:
How can I draw a left pointing triangle using CSS?
(1 answer)
Closed 6 years ago.
I'm actually trying to implement a design done for me into HTML5 and CSS3 with Twitter Bootstrap.
I've got a sidebar on the left of the screen with a list inside, nothing complex.
<html>
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
</html>
I would like to arrive to this result :
Any idea on the CSS code to manage to have that triangle on the right side centered in the middle bottom right ?
You can achieve that triangle with a pseudo element ::after, some positioning and transforming:
li {
position: relative;
display: block;
background: #04a4a9;
padding: 1em;
overflow: hidden;
}
li a {
color: white;
text-decoration: none;
}
li::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
right: -8px;
top: 50%;
transform: translate(0, -50%) rotate(45deg);
}
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
You can achieve this using CSS pseudo elements:
To avoid wasting time with the triangle itself, just use a generator.
.btn {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: #53BED1;
color: #fff;
width: 400px;
height: 150px;
position: relative;
}
.btn::before {
right: 0;
top: 40%;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #ffffff transparent transparent;
}
<div class="btn">My users</div>
You may indeed use a pseudo.
You can also draw background-color of li from that pseudo via a box-shadow, so the triangle is translucide.
You can use color on li to easily change bg-colors since you reset color on <a>, box-shadow color inherits color value(currentcolor) if none set in the rule (so does border-color)..
li {
position: relative;
display: inline-block;
padding: 1em;
overflow: hidden;
color:tomato;
text-shadow:1px 1px black;
}
li:nth-child(even) {
color:turquoise
}
li.active {
color: #04a4a9;
}
li a {
color: white;
text-decoration: none;
position: relative;
z-index: 1;
}
li::after {
content: '';
position: absolute;
width:0px;
height: 15px;
margin: -8px;
right: 0;
top: 50%;
transform: rotate(45deg);
box-shadow: 0 0 0 400px;
}
li.active::after {
width:15px;;
}
/*demo to check if you can see through */
body {
background:linear-gradient(45deg,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue);
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="sidebar">
<ul class="sidebar-menu">
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
I've made my nav and it works fine on desktop fully responsive, but when ever I try to emulate for mobile instead of pushing over the div elements it instead simply shrinks everything. you can see this in action
HTML (inserted via an include statement)
<header id="headers" class="nav-main "> <!-- animated fadeInDown-->
<div class="logo">
<img src="img/logo.png" alt="modren-day-thrones-logo"/>
</div>
<ul>
<li>
Home
</li>
<li>
Chairs
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
Executive
</li>
<li>
Office
</li>
<li>
Lounge
</li>
</ul>
</div>
</div>
</li>
<li>
About Us
</li>
<?php
if(isset($_SESSION['logged_in'])){ ?>
<li>
Add
</li>
<li>
Log Out
</li>
<?php
}else{ ?>
<li>
Login
</li>
<?php
}
?>
</ul>
</header>
<div class="main-header-mobile-box">
<header class="mobile pushmenu-push">
<nav>
<div class="innerbutton">
<div class="catagoerys">
<!--<div id="cpBtn" class="nav-toggel">-->
<div class="menuebutton group">
<i class="fa fa-bars" id="nav_list"></i>
</div>
</header>
</div>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
<i class="fa fa-home"></i> Home
<i class="fa fa-folder-open"></i>Chairs
<i class="fa fa-folder"></i> Executive
<i class="fa fa-folder"></i> Office
<i class="fa fa-folder"></i> Lounge
<i class="fa fa-fw fa-list"></i> About Us
<i class="fa fa-sign-in"></i> Login
<?php
if(isset($_SESSION['logged_in'])){ ?>
<i class="fa fa-sign-out"></i> Log Out
<i class="fa fa-plus"></i>Add
<?php
}
?>
<hr>
</nav>
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
end html
body{
text-align:center;
font:1em "Open Sans", sans-serif;
width:70%;
min-width: 349px;
max-width: 1490px;
margin:0 auto;
overflow-x: hidden;
display: block;
}
.pushmenu { /*this is the nav*/
background: #3c3933;
font-family: Arial, Helvetics, sans-serif;
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
position:fixed;
}
.right-login-mobile-nav{
float: right;
display: inline-block;
}
.break-bar{
width:100%;
display: block;
}
.pushmenu h3 {
color: #cbbfad;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
margin: 0;
background: #282522;
height: 16px;
}
.buttonset{
display: none;
}
.pushmenu a {
display: block; /* drops the nav vertically*/
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #56544e;
border-bottom: 1px solid #312e2a;
padding: 14px;
}
.pushmenu a:hover {
background:#333;
}
.pushmenu a:active {
background: #454f5c;
color: #fff;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav_list {
background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
cursor: pointer;
height: 27px;
width: 33px;
text-indent: -99999em;
}
nav-list.active {
background-position: -33px top;
}
.buttonset {
background: #fff;
height: 16px;
padding: 10px 20px 20px;
}
Mobile specific effects
.mobilebtnmenue{
text-align: left;
margin-top: -22px;
margin-left: 35px;
}
.mobile{
position: relative;
z-index: 50;
background: #222;
font-family: 'Varela Round', sans-serif;
font-size: 17px;
display: block;
}
.pushmenu {
display: block;
}
header{
display:block;
height:100px;
}
body{
width:100%;
min-width: 375px;
}
apparently this code in the header fixes it?
however there seems to be a few hiccups here and there.
<meta name="viewport" content="width=device-width,initial-scale=1.0">