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.
Related
I have a header element, containing a logo (floated left) and another div (floated right) and a hidden nav element. On the open_menu div on older PCs I am getting vertical scroll bars. As if one or two pixels are not fitting. It is as if the child div open_menu has a height greater than its parent the header and this is why the scroll bars appear. But this isn't the case, so why is this happening?
HTML and CSS:
header {
line-height: 71px;
border-bottom: 1px solid;
overflow: auto;
}
.logo {
float: left;
width: 137px;
height: 71px;
}
.open_menu {
float: right;
font-size: 22px;
cursor: pointer;
}
nav {
display: none;
position: absolute;
top: 72px;
bottom: 0;
left: 0;
right: 0;
z-index: 102;
}
<header>
<div class="logo">
<img src="resources/logo.svg" alt="xyz">
</div>
<div class="open_menu" onclick="myFunction()">Menu</div>
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
As explained in https://www.w3schools.com/howto/howto_css_clearfix.asp don't use overflow: auto for clearfix. Try the other way.
The solution is to move the line-height from the header to the child div (open_menu). Hence the height of the header is determined by the child div.
I have a layout like this:
<container div>
<header></header>
<footer>
<div>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div>
</footer>
</container div>
The footer is a centered sticky footer. I want to add social media icons, but I don't want to specify a specific width.
How do I shrinkwrap the footer div without losing it's centered position?
If I add inline:block to the div css, the centering gets lost and it is aligned to the left side of the browser window.
If you add an inline-block to the inner div you will lose the centering, but you can solve this if you add a text-align: center to the footer.
Another solution is to use a CSS3 transform. (You have used one in the header).
When you use percents in a CSS transform the percent is related to the element itself instead to the element's container. Look at the next snippet:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
ul {
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
}
footer#social {
background: #F00;
bottom: 0;
left: 50%;
padding: 0 10px;
position: absolute;
transform: translateX(-50%);
width: auto;
}
<footer id="social">
<div id="socmed">
<nav id="social" class="socialIndex">
<ul>
<li>mail </li>
<li>linkedin</li>
<li>telephone</li>
</ul>
</nav>
</div>
</footer>
Simply use 'inline-block', like this:
footer > div {display: inline-block;}
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'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
I used the technique of sticky footer provided by Martin Bean and Ryan Fait for a while, works fine until I find myself needs to put a sticky footer on a fixed position sidebar.
Since fixed position sidebar is invisible to the document, the setting of margin and padding in the wrapper has no effect. I tried to add another inner-wrapper inside the sidebar but also not helping. I would like to know if there's any pure CSS solution for this request?
The reason I have to use fixed positioning sidebar is I use transitioning effect to collapse it when screen size is small. The method is learned from StartBootstrap, example simple-sidebar.
BTW: I'm using BS3
The basic set up of my site is:
HTML
<div id="wrap">
<div id="sidebar-wrapper">
<div id="inner-wrap">
<ul id="sidebar-nav">
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="footer">
Copyright claim
</div>
</div>
<div id="main-wrapper">
Some Content
</div>
</div>
CSS
html, body {
height: 100%;
}
#wrap {
height: 100%;
}
#sidebar-wrapper {
width: 250px;
position: fixed;
min-height: 100%;
height: auto !important;
height: 100%;
padding: 0 auto 50px;
margin: 0 auto -50px;
}
#inner-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
padding: 0 auto 50px;
width: 100%;
}
#sidebar-nav {
position: relative;
top: 0px;
width: 250px;
margin: 0px;
padding: 0px;
}
#footer {
height: 50px;
position: absolute;
width: 250px;
}
I made a temp bootply. Hope it helps.
UPDATE
The problem is solved by Bass. Thanks a lot! The cause of the above code not working is due to the extra 'height: auto !important;' set in the parent #sidebar-wrapper. Delete it then everything works fine. If you like, you can also delete the position:absolute in #footer as well.
I seems to me you can do the same with an extra wrapper on your sidebar:
html
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div id="sidebar-wrapper-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">Start Bootstrap</li>
<li>Dashboard</li>
<li>Shortcuts</li>
<li>Overview</li>
<li>Events</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div style="background-color:red;height:60px">footer</div>
</div>
css
#sidebar-wrapper-wrapper {
height: auto !important;
margin: 0 auto -60px;
min-height: 100%;
padding: 0 0 60px;
}