I have long page with fixed left sidebar :
<div id="sidebar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
</ul>
</div>
and js for affix:
$("#sidebar").affix({offset: {top: 0, bottom:420} });
I have and footer which is with height:390px.
When I first time scroll to the bottom of the page and try to scroll up the sidebar returns to its first position (to the top of the page) and it is not with position:fixed, anymore. It is with inline style position:relative, added with Bootstrap JS. When I scroll to the top I see class changed to affix-top. Every other scroll page position, the class is affix, even if it is of the bottom of the page and sidebar stay with position:relative.
If I use only :
$("#sidebar").affix({offset: {top: 0} });
, without bottom, it works fine, but I need bottom, because of the footer.
Where can be the problem ?
As the docs suggest adding position: absolute to the .affix-bottom appears to solve this problem.
So you need the css:
#sidebar.affix-bottom {
position: absolute;
}
Bootply
Related
I have a tailwindcss component as defined below. The parent container is set position: relative, which houses a dropdown component. which is supposed to show on button hover.
Everthing works fine but the moment I put the dropdown inside a container with overflow set to auto. It seem as though the dropdown menu is constraint to the height of the contianer. In other the words the the dropdown adds scrolling instead of popping out.
How do I make is pop out of the container instead being constraint to the parent's height.
Link to code: tailwind playbook
<div class="h-20 overflow-y-auto">
<div class="group relative inline-block">
<button>show</button>
<ul class="absolute hidden border p-5 group-hover:block">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
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 would like to wrap a nav around a centered logo image, see a example her.
In addition I would like this nav to scale in a responsive way, when I re-size the browser window.
This is my non-responsive attempt so far! fiddle
<div id="nav">
<img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="Mountain View" class="logo"/>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div><!--end nav-->
Maybe in a kind of table structure?
Or there is a prity lib for your problem:
http://zikes.github.io/circle-menu/
http://zikes.github.io/circle-menu/examples/
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.
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