I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.
I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?
Here is a example JSFiddle
The code I am using:
<header>
<nav style="background-color: #FAD10E; height:50px">
<div class="menu-button">Mobile Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li>Home</li>
<li>Stuff
<!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
<ul>
<li>Stuff 1</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
<li>Stuff 6</li>
</ul>
</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
</ul>
</nav>
</header>
<div>
<!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
<div class="autoplay">
<div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
</div>
</div>
You only need to add two lines of CSS
Example fiddle
CSS
.flexnav{
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:90%;
position: relative; /* <-- Added */
z-index: 1; /* <-- Added */
}
The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).
The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.
Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.
Related
Currently, if I create a div just after my navigation bar it hides underneath the navigation bar. I'm new to CSS but I'm quite sure this has to do with the fixed navigation bar being taken out of the document flow.
Here is the current situation: https://jsfiddle.net/8pwcobuz/
HTML structure:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul id="nav">
<li>List item 1</li>
<li>List item 2</li>
<li class="dropdown">
List item 3
<ul class="dropdown">
<li>List item 3.1111111111111</li>
<li>List item 3.2</li>
<li>List item 3.3</li>
</ul>
</li>
<li>List item 4</li>
<li class="dropdown">
<i class="fa fa-bars"></i>
<ul class="dropdown">
<li>List item 5.1</li>
<li>List item 5.2</li>
<li>List item 5.3</li>
</ul>
</li>
</ul>
<div id="content">
</div>
</body>
</html>
Relevant CSS:
#nav {
background-color: #333;
position:fixed;
width:100%;
box-shadow: 0px 0px 10px 1px;
}
#content {
margin-top:50px;
}
I've tried two approaches.
First of all, I placed the navigation bar outside of the body element and adding a top-margin to the body (if this is terrible please let me know), but it didn't seem to work. My reasoning here was that fixed elements are fixed relative to the viewport, while all other positioned elements are positioned relative to the body. So by giving a margin-top to the body and just adding content like I normally would, it would work right? But it didn't.
Secondly, I tried to create a div that contains the content of the entire page, also with a top-margin to adjust for the space taken up by the fixed navigation element. This didn't work either.
In both cases, the navigation bar moves down as well when I set the margin-top property, and I only want the content to move. What am I missing here?
Additional question: Is there any way right now to do this in a responsive way without using Javascript or jQuery? I'm trying to avoid those for now, since I'm just starting out.
Thanks in advance!
Having problems with my CSS menu drop-down as instead of overlapping the containers its expanding them. Probably very simple oversight but can't find the answer (closest match was Div within li not expanding but the suggestion of putting an absolute position to the submenu class didn't work). Also there is no JS.
Here is the JSFiddle Link : http://jsfiddle.net/KNBLC/
HTML
<body>
<div class="secondary-content-6col">
<h1><span class="white">Headline</span></h1>
<ul class="yellow-call-to-action">
<li>1. Select a Product <img src="../img/arrow-small.png" alt="arrow"/>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
<!--- 1st column Footer -->
</li>
</ul>
</div>
<p> </p>
Change this in your css
.secondary-content-6col {height:150px;}
You need to set a height to that div, else it wil see the height as
height:auto;
Thank you for reading my question.
I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):
I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header logo"><img src="the image"></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to look something like this:
empty space THE IMAGE
MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4
empty space THE IMAGE
I'm not sure whether I understood the question. But to my answer would be:
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
And style it like so:
ul li{
margin-right:20px;
line-height:200px;
float:left;
}
ul li img{
height:200px;
width:auto;
}
ul li a {
text-decoration:none;
border-bottom:2px solid red;
}
You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom.
Here you can see jsFiddle
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
How could I have the tab to be on hover mode while I rollover the drop down sub-menu.
Does it require javascript or it could be done solely on CSS?
<li id="anchor" class="title dropdown">Main Tab
<div class="column">
<ul>
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</div>
</li>
As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.
As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)
Update;
Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).
Something like this...
<li id="anchor" class="title dropdown">Main Tab
<ul class="column">
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</ul>
</li>
/* styles */
li#anchor:hover {
/* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, float, position etc */
}
li#anchor:hover ul.column {
display: block;
}
Its untested, but I've done more of these than I'd care to remember :P
you can do it with CSS but need JS for older crappier browsers(ie6) e.g.
li .column{
display: none;
}
li:hover .column{
display: block
}
IE6 only supports hover on anchor tags hence the need for JS.