Weird problem with a navigation area. It works on all desktop browsers, but not on iOS Safari and Google Chrome. Tapping the links does nothing, although tap-and-hold will show the popup-menu asking to open the link in a new window, so in that case it does get recognised as a link.
Can anyone spot what I'm doing wrong?
Thanks for any help!
HTML:
<div id="nav">
<h1>Site title<span></span></h1>
<ul>
<li id="nav-reserveren">reserveren</li>
<li id="nav-kalender">kalender</li>
<li id="nav-interieur">interieur</li>
<li id="nav-contact">contact</li>
</ul>
</div>
Relevant CSS:
#nav h1 {
text-indent: -9999px;
font-size: 0;
margin: 0;
padding: 0;
width: 451px;
height: 81px; /*same as span height*/
position: relative;
}
#nav h1 span a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 451px;
height: 81px;
}
#nav ul {
position: absolute;
left: 461px;
top: 14px;
list-style-type: none;
}
#nav ul li {
display: inline;
}
#nav ul li a {
float: left;
height: 60px;
text-indent: -9999px;
}
#nav ul li#nav-reserveren a {
width: 203px;
background: transparent url(../img/nav/reserveer.png) top left no-repeat;
}
#nav ul li#nav-kalender a {
width: 109px;
background: transparent url(../img/nav/kalender.png) top left no-repeat;
}
#nav ul li#nav-interieur a {
width: 96px;
background: transparent url(../img/nav/interieur.png) top left no-repeat;
}
#nav ul li#nav-contact a {
width: 90px;
background: transparent url(../img/nav/contact.png) top left no-repeat;
}
Edit: solved.
The problem was setting the opacity of the links in jQuery:
var navLink = $('#nav ul li a');
navLink.css('opacity', '0.8');
navLink.mouseover(function(){
$(this).css('opacity', '1');
});
navLink.mouseout(function(){
$(this).css('opacity', '0.8');
});
$('#nav ul li a.active').css('opacity', '1');
Moving this over into straight CSS did the trick!
As h1 is a block element with relative and ul is absolute. the ul tends to go under the h1 making the links not clickable.
-> add display:inline-block to h1
or
-> add some z-index (above 1) to ul
Either one should fix the issue.
Related
I am trying to create a header + navigation that should look like this:
However, I found some difficulties completing the task. What I have done so far, is to set a solid background for the header. Then, add the jagged (weave look-alike things) with ::before and ::after elements (also with background pictures) and so far it looks great, except that when I hover over an element, the :before and :after elements don't get colored with the same color as the hovered element (as the example in the picture).
Is my approach, the correct one or am I missing something? I have also thought about creating an Overlay Div on top of the whole header, but then issues will appear on different resolutions and also, I do not think that this fixes the original issue, different color on hover.
Do you guys have any ideas that could help, or materials that did I did not manage to find on the web?
Here is my code: https://jsfiddle.net/nbrLck99/1/
.main-nav::after {
content: '';
position: absolute;
top: 100%;
background-image: url('../images/desktop-header-background.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
height: 10px;
display: block;
width: 100%;
}
EDIT: managed to upload and tun the image in jsfiddle.
This won't work.
Your :after element is a background image. This means it isn't affected by by the background-color attribute. You'll have to create an :after element for every menu item and then alter it's background image with the :hover selector. You'll need an image for the default background and one for the hovered one. If you wish to have different "waves" you can create an image for each tab.
A quick preview:
.main-nav {
position: relative;
}
/* magic starts */
.level_1 > li > a::after {
content: '';
position: absolute;
top: 100%;
background-image: url('https://i.imgsafe.org/a58a017b5d.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
height: 10px;
display: block;
width: 100%;
}
.level_1 > li:hover > a::after {
background-image: url('http://i.imgsafe.org/a5f53cc8bf.png');
z-index: 10;
}
/* magic ends */
.main-nav .level_1 {
margin: 0;
display: inline-block;
background-color: #0E5780;
width: 100%;
position: relative;
}
.main-nav .level_1 li {
position: relative;
}
.main-nav .level_1 li:hover {
background-color: #f00;
}
.main-nav .level_1 > li {
display: block;
float: left;
padding-top: 15px;
padding-bottom: 15px;
}
.main-nav .level_1 li a {
display: block;
padding: 10px;
}
.main-nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding-top: 15px;
background-color: #0f0;
}
.main-nav .level_1 > li:hover ul {
display: block;
}
<div class="container">
<nav class="main-nav">
<ul class="level_1">
<li class="dropdown">
home
<ul class="level_2">
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>about</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</nav>
</div>
I'm trying to center <li> items in the page and next to each other without any luck!
I have tried all sorts of ways from display:table; to magin:0 auto; and display:block; and display:inline-block; etc etc... and unfortunately nothing seems to work.
To explain this I've created this JSFIDDLE
Please expand the HTML section of that fiddle to see the menu items in the normal mode (green bar).
the CSS Code that I have been messing around with is this part:
nav {
/*position: absolute;
top: 0;
right: 5px;*/
}
nav li {
float: left;
display: inline-block;
}
nav li a {
font-size: 11px;
color: #9aa6af;
padding: 24px 15px;
display: block;
}
nav li a:hover {color: #000;}
could someone please advise on this issue?
any help would be appreciated.
Thanks in advance.
basicly you can do :
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
Float kills display and cannot be centered
You have to manipulate the <ul> parent, for example in your jsfiddle setting display: table; margin: 0 auto; to the nav will center the nav menu
Try this technique:
/* center nav */
nav > ul { /* center ul */
float: left;
position: relative;
left: 50%;
}
nav > ul > li { /* compensate ul position */
float: left;
display: block;
position: relative;
right: 50%;
}
nav > ul > li > a {
display: block;
}
I've updated your fiddle https://jsfiddle.net/tianes/h1m9aog6/4/
on ul apply this
ul
{
display: table;
margin: 0 auto
}
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
I'm making a dropdown menu but for some reason the dropdown's width doesn't work.
I tried making a fiddle but I couldn't get it to work with the angular part.
I'm using angular so this is my HTML:
<ul id="main-menu">
<li data-ng-repeat="item in mainMenu" data-ng-switch on="item">{{item}}
<ul data-ng-switch-when="Mina sidor">
<li data-ng-repeat="subitem in subMenu.myPages">{{subitem}}</li>
</ul>
</li>
</ul>
CSS (I'm using SASS so it's a bit awkwardly formatted, I apologize for that) :
body, #main-menu, #main-menu li ul {
margin: 0;
padding: 0; }
body {
width: 100%; }
#main-menu {
list-style: none; }
#main-menu li:nth-child(even) {
background: red; }
#main-menu li {
width: 12.5%;
display: inline-block;
text-align: center; }
#main-menu li ul {
display: none;
width: inherit; }
#main-menu li ul li {
height: 30px;
line-height: 30px;
width: inherit;
height: 30px;
background: pink;
display: block;
text-align: left;
margin: 0; }
#main-menu li:nth-child(4) {
position: relative; }
#main-menu li:nth-child(4):hover ul {
position: absolute;
display: block;
background: yellow; }
Here's what the problem looks like:
The ul dropdown and it's li:s width doesn't work for some reason, even though the box model in the console says that their width is in fact 12.5%. Why aren't they stretching to this width?
Edit: I had set the dropdown ul's width to 12.5% instead of 100%, it works perfect now.
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
I'm trying to make a menu for a web page and I'm inserting images as menu separators.
maybe this is a little stupid question but I'm trying to remove the first image of my menu
this is my code:
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu a.first {
background-image: none;
}
I tried to do what that's in this pages:
http://jsfiddle.net/Jaybles/uJdhH/1/
http://www.e-blueprint.co.uk/2011/how-to-use-an-image-as-a-menu-separator/
but it don't work
Try this:
.menu li:first-child{
background-image: none;
}
because your background is on the li tag and your .first class is on an anchor tag you are removing what ever background the anchor holds not the list item.
change to :
.menu li.first {
background-image: none;
}
You are specifying a background property above for a list item and then removing the background image on the a.first class. You should update .menu class to:
.menu li.first { background:none; }
Well, you had background to < li > ... then removed background from < a > .. 'Won't work'
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu ul li:first-child {
background-image: none;
}
jsfiddle : http://jsfiddle.net/sd6Vu/