I can't work out why this isn't sticking. The exact CSS works on other pages I've used it on.
body {
min-height: 200vh;
}
.link {
background-color: white;
list-style-type: none;
text-align: center;
padding: 0;
margin: 10;
position: sticky;
top: 10px;
}
.link li {
display: inline-block;
font-size: 20px;
padding: 20px;
position: sticky;
top: 10px;
}
<ul class="link">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
I've removed the domain as the client doesn't yet want the site publicised at all
Related
I am trying to create a dot navigation (similar to what is seen on the full page sliders here on w3 schools) however I cannot seem to stack the dots vertically and centered to the right of the page
I have tried a lot of the answers available here (linked below) but none seem to be working.
(Using margin:auto to vertically-align a div, Vertically center ul in div, How do i center li element in ul vertically? css, How to force a list to be vertical using html css)
Display block in the li tags worked but then the elements were displaying as their own section and not on top of the background images as the user scrolls. Perhaps something is conflicting that I can't quite seem to pinpoint.
Thanks
HTML and CSS
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: rgba(155,155,155,0.3);
text-indent: -999em;
cursor: pointer;
position: absolute;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<section>
</section>
</div>
You have errors in your html code <div class="container> must be <div class="container"> and this <li>About us/a></li> must be <li><a href="#about us" class="space-item">About us</li>
Check this snippet
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: lightgrey;
text-indent: -999em;
cursor: pointer;
position: absolute;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<section>
</section>
</div>
I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>
Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
I am trying to do a navigation bar with some <ul>and<li> but at this time I can position the elements in the order I want, I am learing how to postion elements and I am new at this css :/ I hope you guys can help me out.
#navbar {
width:100%;
height: 75px;
top : 20px;
position: absolute;
z-index: 999;
background-color: #fff;
opacity: 0.8;
}
.logo img {
height: 75px;
}
.navigation{
width: 100%;
height: 75px;
top :10px;
position: absolute;
z-index: 999;
}
ul {
list-style-type: none;
text-decoration: none;
}
li {
display: inline-block;
margin-left :200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</div>
</div>
I have this so far but I want something like this
What I want to look like
The problem is when I try to style the li a { it doesnt let me to make only margin from the elements besides he give margin from everthing :/
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 50%;
margin: 0 auto;
}
header {
background: #fff;
opacity: 0.8;
position: fixed !important;
top : 20px;
width: 100%;
z-index: 999;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
margin-left: 10%;
padding: 10px 0;
}
.logo img{
height: 60px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 60px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</nav>
</div>
</header>
Here's a solution for you. I changed only the last two CSS rules, everything else is like in your code.
#navbar {
width: 100%;
height: 75px;
top: 20px;
position: absolute;
z-index: 999;
background-color: #fff;
opacity: 0.8;
}
.logo img {
height: 75px;
}
.navigation {
width: 100%;
height: 75px;
top: 10px;
position: absolute;
z-index: 999;
}
ul {
list-style-type: none;
text-decoration: none;
}
li {
display: inline-block;
margin-left: 50px;
}
li:first-child {
margin-left: 100px;
}
ul li a {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</div>
</div>
I am stumped on the following. I just added a logo to a site and for some reason, my nav panel links that are to the right of the logo/image are now not clickable. It appears that the image is somehow over-taking them, but I do not see how. In the console/inspect it doesn't show the image over-taking them?
Does anyone see why this is happening?
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
I don't understood whay you have give position:absolute to logo but, add z-index: -1; to .logo will make your link clickable..
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
z-index: -1;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
Edit:
Other solution is give display: block; to .logo a will work. Fiddle
The image is not overtaking them but the <div> the image is sitting in is. It's full width so you have a transparent div sitting on top of your navbar. Limit the width of your logo container, use a span instead or float it as suggestions.
Check that the z-index of the image is below the z-index of the links.
You don't really need to use position: absolute;. Instead use display:inline or inline-block and avoid overlapping.
You CSS would look like this:
.nav-list {
display:inline; /* Add this */
margin: 0;
/* width:100%; you can remove this */
list-style: none;
text-align: right;
padding: 0;
}
.logo {
display:inline; /* add this*/
margin-top: -15px;
cursor: pointer;
/* z-index: -1; no need for z-index */
}
JsFiddle
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;