so I'm having this issue. Here is the jsfiddle.
https://jsfiddle.net/g5yo9jts/
<body>
<div class="header">
<div class="menuIcon">
<a id="nav-toggle" href="#menuExpand"><span></span></a>
<div class="box"><h3>Home</h3></div>
</div>
<div class="menu">
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
<li>Menu Option 3</li>
<li>Menu Option 4</li>
</ul>
</div>
</div>
</body>
* {
-webkit-font-smoothing:antialiased;
padding: 0;
margin: 0;
}
#nav-toggle span {
margin-left: 15px;
float: left;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 25px;
background: white;
position: absolute;
display: block;
content: '';
}
#nav-toggle span:before {
top: -6px;
}
#nav-toggle span:after {
bottom: -6px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
h3 {
font-size: 1em;
color: white;
float: right;
margin-right: 15px;
margin-bottom: 25px;
font-family: "alternate-gothic-no-3-d";
font-weight: 800;
}
.header .menu ul {
padding: 0;
margin: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
.header .menuIcon {
height: 50px;
display: none;
background: #000;
width: 100%;
}
.header .menuIcon a {
width: 100%;
display: inline-block;
color: #fff;
}
.header .menuIcon a img {
vertical-align: middle;
}
#media only screen and (min-width: 400px) {
.menu {
display: none;
}
}
#media only screen and (max-width: 767px) {
.header .menu {
max-height: 0;
overflow: hidden;
float: none;
text-align: center;
width: 100%;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu.menuOpen {
max-height: 1000px;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu ul li {
display: block;
width: 100%;
background: #000;
border-top: 1px solid #4d4d4d;
}
.header .menu ul li:hover {
background: #999;
}
.header .menu ul li a {
color: #fff;
text-shadow: #848484 0px 1px 2px;
padding: 10px;
width: 100%;
}
.header .menuIcon {
display: inline-block;
}
}
$(function() { $("a[href=#menuExpand]").click(function(e) {
$(".menu").toggleClass("menuOpen"); e.preventDefault(); });});
document.querySelector( "#nav-toggle" ).addEventListener( "click",
function(){
this.classList.toggle( "active" );
});
$(".header").click(function() {
$('.menu').show();
});
The main issue is my hamburger icon and text font aren't lining up. As you can see the hamburger is centered vertically and the text is on bottom right. I've tried everything from margining the text, to adding a box div to the text to move it. Floating, absolute positioning is not working.
I'd also like to have the hamburger icon on the right, and the text for my page on the left but I was having issues with the centering that I hadn't got that far. If anybody could help out that would be awesome.
Thanks so much.
NB: Resize the fiddle 'Result' view to something closer to a mobile/tablet device display resolution to view the menu. Maximum width 767px.
I think i have your problem solved. Only thing is there is a small gap between the header and the menu items when the menu appears (didn't tackle that) I'm sure some negative padding/margin will fix that right up
$(function() {
$("a[href=#menuExpand]").click(function(e) {
$(".menu").toggleClass("menuOpen");
e.preventDefault();
});
});
document.querySelector("#nav-toggle").addEventListener("click", function() {
this.classList.toggle("active");
});
$(".header").click(function() {
$('.menu').show();
});
$(".swap").click(function() {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
});
* {
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
}
.menuIcon a,
.menuIcon p {
display: inline;
}
#nav-toggle span {
margin-left: 15px;
float: left;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 25px;
background: #000000;
position: absolute;
display: block;
content: '';
}
/*#nav-toggle span:before {
top: -6px;
}
#nav-toggle span:after {
bottom: -6px;
}*/
#nav-toggle img,
#nav-toggle img:before,
#nav-toggle img:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active img:before,
#nav-toggle.active img:after {
top: 0;
}
#nav-toggle.active img:before {
transform: rotate(45deg);
}
#nav-toggle.active img:after {
transform: rotate(-45deg);
}
h3 {
font-size: 1em;
color: white;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "alternate-gothic-no-3-d";
font-weight: 800;
}
.header .menu ul {
padding: 0;
margin: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
.header .menuIcon {
height: 50px;
display: none;
background: #000;
width: 100%;
}
.header .menuIcon a {
width: 100%;
display: inline-block;
color: #fff;
}
.header .menuIcon a img {
width: 75px;
height: 50px;
float: right;
margin-top: -34px;
margin-bottom: 15px;
}
#media only screen and (min-width: 400px) {
.menu {
display: none;
}
}
#media only screen and (max-width: 767px) {
.header .menu {
max-height: 0;
overflow: hidden;
float: none;
text-align: center;
width: 100%;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu.menuOpen {
max-height: 1000px;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu ul li {
display: block;
width: 100%;
background: #000;
border-top: 1px solid #4d4d4d;
}
.header .menu ul li:hover {
background: #999;
}
.header .menu ul li a {
color: #fff;
text-shadow: #848484 0px 1px 2px;
padding: 10px;
width: 100%;
}
.header .menuIcon {
display: inline-block;
}
}
<body>
<div class="header">
<div class="menuIcon">
<p>
<h3>ELIJi</h3>
</p>
<a id="nav-toggle" href="#menuExpand">
<img class="swap" src="http://www.rachelgallen.com/images/hamburgerIcon.png" data-swap="http://www.rachelgallen.com/images/close.png"></img>
</a>
</div>
<div class="menu">
<ul>
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
<li>Menu Option 3
</li>
<li>Menu Option 4
</li>
</ul>
</div>
</div>
</body>
Related
I would like to know the CSS code used to make the underline effect for the menu items of this website : https://www.kevin-missud-charpente.fr/
Thanks in advance.
this is better
body,html {
margin: 0;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #fff;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
this is on hover underline effect
Here a link to codepen with the same underline animation.
https://codepen.io/Nerd/details/zBmAWV
HTML
<nav>
Hover me!
</nav>
CSS
nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
color: #000;
text-decoration: none;
font-size: 42px;
font-family: sans-serif;
&:hover {
color: #000;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
}
I followed this tutorial to create a responsive hamburger menu. But i can't figure out why the menu items don't show when my screen is desktop size.
When the screen is mobile size i can click the hamburger menu and the items appear. If i scale up my screen to desktop size while the menu is "open" they do appear the way i want to (because of my media querie). But when i refresh the page (while my screen is desktop size) my menu items don't appear. I can't seem to figure it out, please help if you see my mistake. Thanks!
This is what i want:
This is what i get now:
This is what i get when i scale to mobile screen:
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
#media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
You need to remove the max-height: 0;and max-height:250px set a height: auto;on the menu in the media query for the menu to show up in desktop.
Update I've revised the snippet, it works now.
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
#media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
So something is overriding the background-color property in my webpage. It works just fine in the mobile-scaled version, but for some reason when it runs the media-query the background color matches the body background color.
It does work, however, when I use nav{position: fixed;} but I can't set it as fixed because there's a header above it, so when you scroll down the nav sticks and there's a space above it.
So what's causing the media-query background color to be overridden?
EDIT
This is what I'm seeing when I have it fullscreen on my computer
desktop nav shot
And this is what I'm seeing when mobile layout mobile nav shot
(Sorry if it's an obvious answer and I'm just not seeing it)
/*NAV*/
nav
{
background-color: #3f3f3f; /*this color doesn't work in the media query*/
width: 100%;
color: #e9e9e9;
z-index: 3;
}
/*MOBILE FIRST FORMATTING*/
nav ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li a
{
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
nav li a:hover,
nav .hambut:hover
{
background-color: #189000; /*green*/
}
/*NAV LINKS*/
nav .menu
{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*MENU FORMATTING*/
nav .hamicon
{
cursor: pointer;
display: inline-block;
float: right;
padding: 2em 1.5em;
position: relative;
}
nav .hamicon .navicon
{
background: #e9e9e9;
display: block;
height: .15em;
position: relative;
transition: background .2s ease-out;
width: 1.5em;
}
nav .hamicon .navicon:before,
nav .hamicon .navicon:after
{
background: #e9e9e9;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
nav .hamicon .navicon:before
{
top: .375em;
}
nav .hamicon .navicon:after
{
top: -.375em;
}
/*HAMBURGER BUTTON*/
nav .hambut
{
display: none;
}
nav .hambut:checked ~ .menu
{
max-height: 15em;
}
nav .hambut:checked ~ .hamicon .navicon
{
background: transparent;
}
nav .hambut:checked ~ .hamicon .navicon:before
{
transform: rotate(-45deg);
}
nav .hambut:checked ~ .hamicon .navicon:after
{
transform: rotate(45deg);
}
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after
{
top: 0;
}
/*DESKTOP NAV FORMATTING*/
#media (min-width: 48em)
{
nav
{
background-color: #3f3f3f;
}
nav li
{
float: left;
}
nav li a
{
padding: 1em 1.5em;
}
nav .menu
{
clear: none;
float: right;
max-height: none;
}
nav .hamicon
{
display: none;
}
}
<nav>
<input class="hambut" type="checkbox" id="hambut" />
<label class="hamicon" for="hambut"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Trailer</li>
<li>Download</li>
<li>Devs</li>
</ul>
</nav>
This happens because in the desktop version you are using float: right to align your <ul> element. float property has a weird behavior and it's not been designed to align block element, it's been designed to align inline elements instead.
For this reason, when an element has an automatic height and its child use float, the parent will ignore the size of that element to compute the height.
In your case the consequence is that, in your desktop version, your <nav> element won't use the height of <ul> to compute its own height, since there's no an explicit height and there are no other children, the resultant computed height will so be 0px.
You have two solutions, the first is to set a fixed height:
nav {
..
height: 50px;
}
The second, which is advised, is to use a so called clearfix.
A clearfix will cancel the effects of float and the parent element will use again all its children sizes to compute the height.
/*NAV*/
nav
{
background-color: #3f3f3f; /*this color doesn't work in the media query*/
width: 100%;
color: #e9e9e9;
z-index: 3;
}
/*MOBILE FIRST FORMATTING*/
nav ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li a
{
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
nav li a:hover,
nav .hambut:hover
{
background-color: #189000; /*green*/
}
/*NAV LINKS*/
nav .menu
{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*MENU FORMATTING*/
nav .hamicon
{
cursor: pointer;
display: inline-block;
float: right;
padding: 2em 1.5em;
position: relative;
}
nav .hamicon .navicon
{
background: #e9e9e9;
display: block;
height: .15em;
position: relative;
transition: background .2s ease-out;
width: 1.5em;
}
nav .hamicon .navicon:before,
nav .hamicon .navicon:after
{
background: #e9e9e9;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
nav .hamicon .navicon:before
{
top: .375em;
}
nav .hamicon .navicon:after
{
top: -.375em;
}
/*HAMBURGER BUTTON*/
nav .hambut
{
display: none;
}
nav .hambut:checked ~ .menu
{
max-height: 15em;
}
nav .hambut:checked ~ .hamicon .navicon
{
background: transparent;
}
nav .hambut:checked ~ .hamicon .navicon:before
{
transform: rotate(-45deg);
}
nav .hambut:checked ~ .hamicon .navicon:after
{
transform: rotate(45deg);
}
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after
{
top: 0;
}
/*DESKTOP NAV FORMATTING*/
#media (min-width: 48em)
{
nav
{
background-color: #3f3f3f;
}
nav li
{
float: left;
}
nav li a
{
padding: 1em 1.5em;
}
nav .menu
{
clear: none;
float: right;
max-height: none;
}
nav .hamicon
{
display: none;
}
}
<nav>
<input class="hambut" type="checkbox" id="hambut" />
<label class="hamicon" for="hambut"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Trailer</li>
<li>Download</li>
<li>Devs</li>
</ul>
<!-- This is the clearfix -->
<div style="clear: both"></div>
<!-- End of clearfix -->
</nav>
I need a submenu behind the parent menu. Check out the pic (left is the default browser rendering if I'm working with absolute divs, but I need it like on the right):
http://i67.tinypic.com/2nuqb89.jpg
The submenus should be behind the parent menu, to avoid an overlap. I tried some z-index stuff but it doesnt realy work. Like an z-index: -1 might fix the problem for the first submenu, but not for the second, right?
Maybe this fiddle makes it clearer:
html, body {
height: 100%;
background: darkred;
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
display: block;
color: darkred;
text-decoration: none;
padding: 1rem 2rem;
}
.mainmenu {
width: 10rem;
background: white;
position: fixed;
height: 100%;
z-index: 99;
}
.mainmenu li:hover > ul {
left: 100%;
}
.mainmenu__sub {
width: 10rem;
position: absolute;
left: 0;
top: 0;
z-index: -2;
transition: all 0.3s ease-in-out;
}
.mainmenu__sub--red {
background: red;
}
.mainmenu__sub--green {
background: green;
}
<ul class="mainmenu">
<li>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
tldr; I need to reverse the child/parent z-index behavior
Add same color in instant nested li as per below code.
html, body {
height: 100%;
background: darkred;
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
display: block;
color: darkred;
text-decoration: none;
padding: 1rem 2rem;
}
.mainmenu {
width: 10rem;
background: white;
position: fixed;
height: 100%;
z-index: 99;
}
.mainmenu > li{
background: white;
}
.mainmenu li:hover > ul {
left: 100%;
}
.mainmenu__sub {
width: 10rem;
position: absolute;
left: 0;
top: 0;
z-index: -2;
transition: all 0.3s ease-in-out;
}
.mainmenu__sub--red, .mainmenu__sub--red > li {
background: red;
}
.mainmenu__sub--green, .mainmenu__sub--green > li {
background: green;
}
<ul class="mainmenu">
<li>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
I have problem with my drop-down menu. I don't know how to change position of buttons after scrolling under line to center position. Could you help me please?Thanks!
Example:
enter image description here
* {margin: 0; padding: 0;}
body {
font-family: arial;
color:#ccc;
}
#full-screen-background-image {
z-index: -999;
min-height: absolute;
min-width: absolute;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
min-height: 100%; _height: 100;
margin: 0 auto -150px auto;
}
a:hover {
color: #0095cd;
}
section {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/menu01.png)50% 0 no-repeat;
background-size: 1900px 86px;
opacity:0.8;
}
#header-content {
width:960px;
margin: 0 auto;
padding: 60px 0;
}
#content {
width: 960px;
margin: 0 auto;
padding: 100px 0;
}
.static {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}
nav li{
display: inline-block;
padding: 35px 60px 100px 0px;
}
nav li:nth-child(3) {
padding-right: 200px;
}
nav li:nth-child(1) {
padding-left: 4in 0px;
}
.static a {
transition: all linear 0.15s;
color: white;
}
.static li:hover > a,
.static .current-item > a {
text-decoration: none;
color: white;
}
.static .highlighted {
font-size: 10px;
line-height: 0%;
}
.static li:hover .dynamic {
z-index: 10;
opacity: 1;
}
.dynamic {
position: absolute;
z-index: 0;
opacity: 0;
transition: opacity linear 0.15s;
background: #ccc;
}
.dynamic li {
display: relative;
font-size: 14px;
}
.dynamic li a {
text-decoration: none;
color:#17177e;
}
.logo {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/logo.png) 50% 0 no-repeat;
background-size: 125px 86px;
height:155px;
width:180px;
position: absolute;
top: 2px;
left: 390px;
}
<section>
<header>
<div id="wrapper">
<div id="header">
<div class="static-wrap">
<div class="static">
<nav>
<ul>
<li>Home</li>
<li>o vás
<ul class="dynamic">
<li> <span class="highlighted">►</span>Vaše přiběhy</li>
<li><span class="highlighted">►</span>Diskusní fórum
</li>
</ul>
</li>
<li>Services</li>
<li>Work</li>
<li>Blog</li>
<li>Kontakt</li>
</ul>
</nav>
<div class="logo"></div>
</header>
</section>
Try adding a block display to the li links.
.dynamic li a {
display: block;
text-decoration: none;
color:#17177e;
}
Your
.dynamic li {
display: relative;
font-size: 14px;
}
add in 'display: block' in here so it looks like...
.dynamic li {
display: block;
font-size: 14px;
}