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
Related
I want to extend the left side of a navigation menu within a centered container. I tried position: absolute but the menu overlapped the logo,
is there another solution? If not, how can I stop an absolute element overlapping other elements?
Here is an image of what I'm trying to do
extended div
If you want to keep your menu elements inside the container, you can go with an absolute ::before pseudo-element.
section {
max-width: 300px;
margin: 0 auto;
background-color: #eaeaea
}
header {
display: flex;
line-height: 30px;
}
nav {
background-color: rgba(255,0,0,.2);
position: relative;
}
nav::before{
content:'';
position: absolute;
display: block;
width: 100vw;
height: 100%;
right: 100%;
background-color: rgba(255,0,0,.2);
}
<section>
<header>
<nav>navigation menu</nav>
<span>logo</span>
</header>
container
</section>
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 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;
}
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 am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}