I was having trouble centering my sticky nav. After I got it centered it stopped scrolling with the page.Any help would be greatly appreciated I have been looking at this for a while and I am not sure what the problem is.
.navContainter {
width: 960px;
}
.nav {
height: 60px;
background-color: rgba(0, 0, 0, 0.7);
position: -webkit-sticky;
list-style-type: none;
text-align: center;
}
.nav ul {
margin: 0 auto;
padding-left: 0px;
padding-top: 10px;
display: inline-block;
}
ul {
display: inline;
padding: 0;
}
li {
display: inline;
padding: 5px;
font-size: 1.5em;
float: left;
margin-right: 50px;
margin-left: 100px;
position: relative;
font-family: "Josefin Slab", serif;
}
a {
width: 60px;
color: #fff;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
<head class="navContainer">
<nav class="nav">
<ul>
<li>WEB</li>
<li>PHOTOGRAPHY</li>
<li><img src="img/demo/_small/logo.png"></li>
<li>DESIGN</li>
<li>VIDEO</li>
</ul>
</nav>
</head>
In my experience with sticky navs, I would wrap the nav in a container with these elements:
position: fixed;
z-index: 9999;
The content would look something like this:
.content_main{
margin: 0px 0px 0px 0px;
background: url(../images/concrete_seamless.png) repeat 0 0;
padding: 105px 0px 0px 0px;
z-index:5;
overflow: hidden;
display: inline-block;
position: relative;
}
The z-index differences and the relative position of the conent, set the content to hide under the nav while the page is scrolled, while the fixed position makes the nav stick to the browser.
I never use webkit: sticky;
Related
I have a Navbar with logo and links spaced out appropriately, in the hero section I use an image with full width and height but if leaves a white space between the nav and hero section. I have searched for how to address this but cannot seem to figure it out.
How can I remove the space between the Nav and next section?
Example Image: https://ibb.co/7YcTg4p
*Solved - After adding overflow: auto; inside the #container-bg {} class the white space collapsed and now the nav follows the next section with any space issues.
<header>
<img
src="https://cdn.pixabay.com/photo/2017/09/26/21/45/spiral-
2790215__480.png"/>
<nav class="nav-container">
<ul>
<li>Home
</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="container-bg">
<div class="content-wrapper">
<h1>Sample text</h1>
<p>More sample text</p>
Contact
</div>
CSS
header img {
width: 40px;
position: relative;
left: 120px;
top: 15px;
}
.nav-container {
float: right;
}
.nav-container ul {
margin: 0;
}
.nav-container ul li {
display: inline-block;
}
.nav-container ul li a {
text-decoration: none;
padding-right: 60px;
position: relative;
font-size: large;
color: black;
top: 22px;
right: 120px;
margin: 0px 0px 0px 20px;
padding: 0px 4px 6px 4px;
}
#container-bg {
background: url(img/img-bg.jpg) no-repeat center center fixed;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
}
.content-wrapper {
margin: 0 auto;
width: 80%;
text-align: center;
position: relative;
top: 30%;
}
.content-wrapper a {
background-color: blue;
color: white;
border-radius: 15px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #ffffff;
padding: 12px 18px;
font-size: 22px;
cursor: pointer;
I think I did not understand the question but it may help
.content-wrapper {
margin: 0 auto;
width: 80%;
text-align: center;
position: relative;
top: 0%; // here is the trick
}
After adding overflow: auto; inside the #container-bg {} class the white space collapsed and now the nav follows the next section without any spacing or gap issues.
I'm working on a website for practice and I'm having an issue where my nav bar is hanging over the header. I've tried adjusting the margin and that isn't working. I've tried changing the display and position, which end up just breaking the layout. My main goal is to have the navigation cleanly nestled in the bottom right of the header, but I'm not sure how to fix it. Here is the code I've typed:
Place the code into code snippets.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
position: relative;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
The simplest solution is to replace your .nav class with:
.nav {
bottom: 0;
right: 0;
position: absolute;
}
I assume this is more or less what you were trying to achieve with your margins.
An absolutely positioned element will be placed relative to the nearest positioned parent element (i.e. one with relative, absolute, fixed or sticky position). By default that is the highest level block, but since your header has position: fixed it is placed relative to that. The bottom and right values indicate the amount of offset from that block's respective edges.
The height of the header is 200px, but you left margin-top: 175px for the nav. For the nav to start where the header is ending, you need at least 200px as margin-top.
Please run the code snippet to check if this is the desired change. I have changed the position from relative to absolute and added bottom: 0 and right: 0 for class .nav.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
bottom: 0;
right: 0;
position: absolute;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
There might be other ways, but using flex layout will solve your problem. 1st add display:flex in your header.
Then .nav with the following:
{
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
See the final result:
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
display: flex;
}
.nav {
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
More details on how flex works, see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I have horizontal navigation bar like this.
I need to make this navigation bar vertical left. This is my html
<div ng-controller="PortalController">
<header>
<h1>E_Zuite</h1>
<nav role='navigation'>
<ul>
<li><a class="link-1 entypo-home active" href="#home"></a></li>
<li><a class="link-2 entypo-picture" href="#clients"></a></li>
<li><a class="link-3 entypo-user" href="#about"></a></li>
<li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
</ul>
</nav>
</header>
</div>
and this is my css
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
height: 70px;
display: inline-block;
}
I exactly need this navigation bar and icons from top.I'm not much familiar with css.
Change your css to this:
header {
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
width: 200px;
height: 70px;
float: left;
display: block;
}
What I have done is simple, changed the width of the header and set the height to be 100%, then I have set the width and float attribute for your li menu.
It should work as you expect, BUT have a look through it to make it exactly how you want it.
header h1{
float:none;
}
header nav ul {
float:none;
}
header nav ul li{
display:block;
width:100%
}
just add css in your css file.
In case you want to fix your vertical nav to the left, the code below will help.
nav{
position: fixed;//fixes the navigation bar to left
top: 100px;
left: 0px;
}
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
width: 30px;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline-block;
width: 30px;
}
I haven't coded in over a year so I'm a bit rusty. I'm trying to fix my menu to the bottom right corner of the div "wrapper", but it fixes to the bottom right corner of the screen.
<div id="wrapper">
<header>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Other</li>
</ul>
</div>
and the css
#wrapper {
width: 1840px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #F0E0B2;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
position: fixed;
bottom: 0;
right: 0;
width: 759px;
border-right: 1px solid #C0B38E;
background-color: #F0E0B2;
}
This should do it. The parent container needs position: relative; so that the child can be positioned properly.
#wrapper {
width: 1840px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #F0E0B2;
position: relative;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
position: relative;
bottom: 0;
right: 0;
width: 759px;
border-right: 1px solid #C0B38E;
background-color: #F0E0B2;
}
If you look here: http://www.w3schools.com/cssref/pr_class_position.asp, position: fixed is relative to the browser window. You need to use position: absolute, which is relative to the closest parent div with position: relative. I believe you are wanting something similar to this (note the position:fixed on the #wrapper and position:absolute on the #menu):
#wrapper {
width: 1840px;
height: 300px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #F0E0B2;
position: fixed;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
position: absolute;
bottom: 0;
right: 0;
width: 759px;
border-right: 1px solid #C0B38E;
background-color: #F0E0B2;
}
I think you looking like this. I hope it will helps you.
DEMO
#wrapper {
width:1840px;
margin: 0px auto;
/*text-align: left;*/
padding:15px;
background-color: #F0E0B2;
position: relative;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
position: absolute;
bottom: 0;
right: 0;
border-right: 1px solid #C0B38E;
background-color:red;
}
ul#menu li{
text-align: right;
padding-right: 5px;
float: left;
}
I have tried probably 15 suggestions from stackoverflow on how to center nav. Can you help? I just want to center the nav and be able to hover over Expertise without the rest of the nav bar getting jumbled around.
Here is my markup:
<nav id="header-home-nav">
<div id="menu">
<ul>
<li id="" class="">About</li>
<li id="line-li"><p class="nav-lines">|</p></li>
<li id="" class="">Contact</li>
<li id="" class=""><p class="nav-lines">|</p></li>
<li id="" class="">Expertise
<ul id="" class="sub-menu">
<li>▶ Finance</li>
<li>▶ Operations</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
</ul>
</li>
</ul>
</div>
</nav>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}
#menu li {
background-color: #1b1b1b;
display: block;
float: left;
position:relative;
}
#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
EDIT:
Here is a jsfiddle:
http://jsfiddle.net/8A9tq/
Sorry, forgot to add it.
EDIT:
Responsive is important. So I needs to be centered regardless of screen size.
You can add the following:
#header-home-nav {
width: 100%;
}
Then, give the child (#menu) some kind of max-width and auto margins:
#menu {
background: #1B1B1B;
margin: 0 auto;
max-width: 300px;
position: relative;
font-size: 0.8em;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
}
This seems to work: http://jsfiddle.net/4Eqad/
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
margin-left:25%;
}
Note the new edition is the margin-left:25%. You can make that whatever you would like.
Nav centered: http://jsfiddle.net/8A9tq/1/
To center an element you need three things: a set (non-percentage) width, block display (automatic with block level elements, but it's a good practice anyway), and your left and right margins to be set to auto:
width: 300px;
display: block;
margin: 0 auto;
So for your example, depending on which element you want to center you could try:
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width: 300px;
display:block;
margin: 0 auto;
background-color: #666666;
}
or
#menu {
position: relative;
font-size: 0.8em;
margin: 0 auto;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:300px;
display:block;
}
and so on
Here you can keep your markup and just says to the position has to be 50% left and 50% right.
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
left: 50%;
right: 50%;
}
Fiddle: http://jsfiddle.net/uPs8J/2/