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;
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!
I am trying to produce a Navbar similar to the one on this page :
http://wrapbootstrap.com/preview/WB0375140
I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.
The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.
I am scratching my head trying to find out how that is done - And ideas much appreciated.
You have to add css width property to all elements in the navbar.
Assuming your navbar is something like this:
<div id="myCustomNavbar">
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You should add some style with CSS:
#myCustomNavbar > ul > li
{
width: 100px !important;
}
Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element
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.
I used the method shown in How to target the href to div
to target the href to div. It worked. But I need to add another level.
HTML
<ul >
<li class="active">home</li>
<li>settings</li>
</ul>
<div class="target">
<div id="m1">
<ul >
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
<div id="m2">
<ul>
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div class="target123">
<div id="subm1-1">
content1
</div>
<div id="subm1-2">
content2
</div>
<div id="subm2-1">
content3
</div>
<div id="subm2-2">
content4
</div>
</div>
CSS
.target > div {
display:none;
}
.target > div:target{
display:block;
}
.target123 > div {
display:none;
}
.target123 > div:target{
display:block;
}
My issue is when I click on the link, "item 1" in the content in appears in the correct place. But the content in disappears.
How can I stop this?
My divs are positioned next to each other. So one div doesn't overlap the other.
If I understand correctly what you're trying to do, this is not possible using the :target attribute. The target is always the part of the URL after the #, and there can always only be one target at a time.
This means that whenever you activate a target all the other elements are going to be hidden again. You cannot show contents based on two different targets at the same time using this method.
I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
Here is a link to a page on my site showing exactly this situation:
http://procadsys.worldnz.co.nz/test
Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.
Solved it. The answer is to use line-height, not height:
<ul>
<li style="line-height: 40px;">Parent Item 1
<ul>
<li style="line-height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="line-height: 40px;">Parent Item 1</li>
</ul>
You use this style code
ul > li:hover ul{
height:40px;
margin:0;
padding:0;
}