I am trying to make the header menu ontop of the tesseract theme (http://tyler.com/ ) a fixed position, so that if you scroll down one can access all menu elements from any postion on the site.
I have tried a few things and always added position:fixed; to a few css classes of the theme, but nothing happened.
I would be glad, if you could help me out with this issue.
Thanks in advance
Edit this code from position: relative to position: fixed
.home .site-header.no-header-image {
left: auto;
position: fixed;
top: auto;
}
Now to avoid the top content getting hidden:
.home .site-content {
padding-top: 60px;
}
Output
You could try:
.<youClassName>{
position: absolute;
top: 0px;
}
This should fix your menu to the top and it will follow you on scrolling.
Add position fixed to a div not in every element
check this fiddle
HTML
<div id = "menu">
<ul class = "main">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id = "content">
CONTENT CONTENT
</div>
CSS
div#menu {
position: fixed;
background-color: #0088cc;
color: #f8f8f8;
width: 100%;
height: 50px;
}
ul li {
float: left;
margin: 2%;
list-style: none;
cursor: pointer;
}
#content {
height: 1000px;
}
remove position: relative;
add
.home .site-header.no-header-image {
position: fixed;
}
Related
I've the following problem
If I put a clickable image in my header, you can't click on it. (or common link, both don't work)
When I try re-positioning the image, outside the header - it works.
But when it's still in the header you can't click on it.
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: -10;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
you a have a negative z-index on your header, change it to a positive one or remove it.
negative z-index gets lower in the stacked context order, so you wont be able to click on it
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto;
z-index: 1; /*whatever you need - want here - or just remove it */
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
Not sure why you are saying that:
z-index: -10;
Why you need z-index there? You are just putting the link behind the header that's why you can't click it. Try changing it to 1 or remove it.
By default all the elements of the html are set to z-index: 0;.
So, the body of the HTML is also at the z-index:0;.
And when you are setting z-index:-10 it is putting the header behind the body itself. and hence it is not clickable including its child elements i.e link
Change z-index: -10; to z-index: 0;
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: 0;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
I'm being unable to align the navigation to the right side while it's positioned fixed.
I read previous threads and I implemented what was suggested but despite of that I'm not able to make it stay within the main container and to be aligned to the right.
It either doesn't move at all (with float: right) or goes out of the container.
<div class="container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-positioning">
<div class="menu-primary-navigation-container">
<ul id="primary-menu" class="menu nav-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</nav><!-- #site-navigation -->
</div>
.container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 30px;
box-sizing: border-box;
}
header .main-navigation {
position: fixed;
padding: 20px 0;
z-index: 3;
width: auto;
}
.main-navigation {
clear: both;
display: block;
}
The problem occurs within this site: www.oktawiakata.com
login: login
password: superstrongpassword
Thanks a lot in advance for your hints!
I'm not able to make it stay within the main container and to be aligned to the right.
With position:fixed the position of your element will be relative to the browser window, so it's not exactly correct to say that it will stay within the main container in CSS terms.
If you want it to stay within the main container, you should use position: absolute
#main-container{
position: relative;
}
#navigation{
position: absolute;
right: 0;
}
UPDATE:
Use this code for a navigation bar like the example provided on your comment:
HTML
<div id="navigation-bar">
<div class="navigation-content">
<ul class="navigation-menu">
<!-- Your <li> elements here -->
</ul>
</div>
</div>
CSS
#navigation-bar{
position: fixed;
top: 0;
right: 0;
left: 0;
height: auto;
padding: 15px 0px;
}
#navigation-bar .navigation-content{
width: 1280px;
margin: auto;
text-align: right
}
#navigation-bar .navigation-content ul{
// Your list styles ...
}
When your element is positioned as a fixed element, then you need to change right value to 0px;
#someContainerCSS{
position: fixed;
right : 0px;
}
That should do the work.
I want this code to show as the two images being on top of each other. Outside li, it works, like the two images are on top of each other. But when I put it inside the li, it doesn't work anymore. Only the itemframe image appears but the 0 img doesn't appear. Please help. I need to use li because I am currently using a jquery file known as Sly. By the way the code for this is such
img.shopitemframe{
position: relative;
height: 100%;
width: 100%;
z-index: 1;
}
img.itemicon{
position: relative;
width: 75%;
z-index: 5;
}
<li>
<img class="shopitemframe" src="Images/itemframe.jpg">
<img class="itemicon" src="Images/Items/0.png">
</li>
Any tips or answers on how to make this work? Thank you for your time reading this question too.
Comments in comments.
W3Schools on position tag
li {
position: relative;
/* It won't move but any descendant it has will be placed relative to its position. */
}
img.shopitemframe {
width: 100%;
}
img.itemicon {
position: absolute;
left: 50px;
top: 50px;
/* Its `absolute` position will be calculated relative to `li` element position.
Check the link to W3Schools for more information on that. */
width: 300px;
z-index: 1; /* So it is on top of `.shopitemframe` */
}
<li>
<img class="shopitemframe" src="http://i.4cdn.org/c/1458667272301.png">
<img class="itemicon" src="http://i.4cdn.org/c/1459478128149.gif">
</li>
li
{
background-color: "#f00";
width: 100%;
}
img.shopitemframe{
display: block;
}
img.itemicon{
display: block;
}
<ul><li>
<img class="shopitemframe" src="http://placehold.it/300x200" />
<img class="itemicon" src="http://placehold.it/300x200" />
</li>
</ul>
Please check this code now.
Try This: change the Position to absolute
img.shopitemframe{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
img.itemicon{
position: absolute;
width: 75%;
z-index: 5;
}
<li>
<img class="shopitemframe" src="Images/itemframe.jpg">
<img class="itemicon" src="Images/Items/0.png">
</li>
I have a position:fixed div at the top of my page, so that when a user scrolls down the menu always stays at the top.
How do I position another div element underneath the fixed div.
I'm using CSS and HTML.
I'm using a smooth scrolling jQuery and need each section header to appear just under the menu bar.
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Do everything in absolute position domain.
.1(class){
position: absolute;
left: 10px;
top20px;
}
Like above classify each object with a class and set their position.
I've tried many technics and I can't seem to fix this issue.
I would like my menu to always stay at the top of it's parent div. I've made a Codepen of my layout.
Here's the html of my menu and it's parents:
<div id="main-wrapper" class="background-yellow">
<!-- center column -->
<div id="center-wrapper">
<nav id="navbar">
<div id="navbar-wrapper">
<ul id="main-nav">
<li>Édito</li>
<li>Programme</li>
<li>Participants</li>
<li>Situation</li>
<li>À propos</li>
<li>Infos</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</div>
</div>
And here's their css:
#main-wrapper {
width: 100%;
height: 100%;
}
#center-wrapper {
position: absolute;
left: 30%;
width: 40%;
height: 100%;
}
#navbar {
position: absolute;
width: 100%;
height: 100px;
}
#navbar-container {
position: fixed;
z-index: 666;
}
#main-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
#main-nav li {
display: inline-block;
margin: 10px;
}
--EDIT--
Managed to fix the problem, thanks to Zac.Ledyard, now I need #navbar to be 100% of it's parent div, that is #center-wrapper.
Thanks in advance guys.
One of your CSS id selectors is named wrong. Change #navbar-container to #navbar-wrapper
#navbar-wrapper {
position: fixed;
z-index: 666;
}
The method is simple.
Position:relative for a parent element
Position:absolute for a child element
That way the child element always binds to the top of it's parent element.
Any absolute positioned element has a position in the coordinates of the nearest relative positioned parent ( if none are present - the document itself )
It's really unclear from your page code what's going on there , and what you're trying to achieve.
To bind an element to the top of the -page- ( not to scroll with it ) you need to use position:fixed