I have a navbar with an absolute position and an mage slider. I want to animate the image transition with translate3d/translateX the image ends up overlapping my navigation bar.
Quick example: https://jsfiddle.net/tqu0n4za/
What's a good way to keep the absolute positioning but push the navigation bar in front of the image slider?
My navbar html:
<div id="navbar">
<a id="branding" href="index.html">Hi</a>
<img id="navbar-menu-image" src="..\Images\Menu-Icon-White.svg" alt="Menu_Icon.svg"/>
<!-- Navigation Bar -->
<nav>
<ul>
<li>
<a href="index.html" id='current'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>CV</a>
</li>
</ul>
</nav>
</div>
My navbar css:
#navbar
{
position: absolute;
width: 100%;
transition: 0.2s ease;
}
My image slider html:
<div id="image-slider">
<img class="image-slider-images" src="..\Images\Wallpaper1.jpeg"/>
<img class="image-slider-images" src="..\Images\Wallpaper2.jpeg"/>
<img class="image-slider-images" src="..\Images\Wallpaper3.jpeg"/>
</div>
My image slider css:
.image-slider-images
{
width: 1920px;
transform: translate3d(-1000px, 0px, 0px);
height: 800px;
}
z-index: 1;
In my navbar css fixed my issue.
This is what my css looks like now:
#navbar
{
position: absolute;
width: 100%;
z-index: 1;
transition: 0.2s ease;
}
Also, updated jsfiddle: https://jsfiddle.net/tqu0n4za/1/
Related
Having read this after struggling with an absolute-positioned sub-menu that will not appear above page content on desktop breakpoints, I stripped all offending CSS identified in the article, but to no avail. The sub-menu in the below HTML will not appear above page content, despite having absolute position with z-index applied. Anyone with further thoughts on the issue, please let me know -- I'm baffled.
<nav id="nav-main" role="navigation">
<ul class="site-nav site-nav__main">
<li class="nav__menuitem nav__menuitem--main first level1"><a class="nav__menulink nav__menulink--main transition" href="my-link">my-link</a></li>
<li id="subNav__parent" class="nav__menuitem nav__menuitem--parent transition clearfix level1">SubNav Toggle Label<span class="subNav__toggle">+</span>
<ul class="subNav">
<li class="nav__menuitem nav__menuitem--subnav first level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link2">my-link2</a>
</li>
<li class="nav__menuitem nav__menuitem--subnav last level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link3">my-link3</a>
</li>
</ul>
</li>
</ul>
</nav>
.site-nav {
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
list-style-type: none;
transition: .2s ease-out; /*related to a different transition; not relevant to the issue being
posted about*/
transform: translateY(0%);
}
// SUBNAV
.nav__menuitem--parent { /*this is the click element used to open / close the sub-menu
position: relative;
cursor: pointer;
}
.subNav {
position: absolute;
z-index: 10;
margin: 1rem auto 0 auto;
padding: 1rem 0;
width: 250px;
visibility: 0;
}
.subNav.open {
transition-property: visibility, max-height;
transition-duration: .5s;
transition-timing-function: ease-out;
max-height: 500px; /* approximate max height */
visibility: 0;
}
The solution I implemented doesn't address the fact that the HTML and CSS as written should work but doesn't, but FWIW, I z-indexed the header element and positioned it above the wrapping element for page content. Since the submenu is a child of the global nav, which in turn is a child of the header element, it's stack order is equivalent to the header's per the z-index default value of auto.
When specifying position: absolute; the item will be positioned relative to its parent. You need to specifiy top:0 or similar to override this.
Here is a quick fiddle to illustrate
.parent-nav {
background-color:red;
position:absolute;
top:0;
width:100%;
}
.sub-nav-parent {
background-color:blue;
position:relative;
}
/* 10px below sub nav parent */
.sub-nav-child {
background-color:cyan;
position:absolute;
top:10;
left:0;
z-index:99;
width:100%;
}
<div class="page-content">
<h1>
This is my page content
</h1>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
</div>
<div class="parent-nav">
<ul class="sub-nav-parent">
<li>Sub Nav Parent</li>
<li>
<ul class="sub-nav-child">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
</div>
I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
I am trying to use the Bootstrap dropdown on a centered image, but I can't get the dropdown to be centered as well.
Fiddle with my current code
<div class="row">
<div class="col-md-12 profile-picture text-center">
<div class="dropdown col-md-3">
<img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
<ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
</ul>
</div>
</div>
</div>
As you can see the dropdown gets aligned to the left, is there a way to get it to be centered underneath the image? It's in a col-md-3 so try resizing the screen as well.
Add display:inline-block to your dropdown.
.dropdown
{
display: inline-block;
}
Here's a fiddle.
position: absolute, left:0px and float:left are the causes.
Fix:
.profile-picture .dropdown-menu {
position: relative;
clear: both;
float: none;
}
The width will stick the the width of the column :)
If you don't like that, use these, or remove the column setup:
width: 170px;
margin: 0 auto;
See updated fiddle
This would be one solution, which will work responsively as long as you declare a width for the menu:
.profile-photo {
width: 170px;
height: 170px;
margin: 0 auto;
display: block;
}
.dropdown-menu {
margin-left: -85px;
width: 170px;
left: 50%;
position: absolute;
}
I removed your col-md-3 as you are just positioning the menu halfway across the col-md-12 with this method.
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO