What I'm trying to achieve ---> http://jsfiddle.net/46a8u/
I applied those styles to my css. Problem is my links bounce to the left when hovered. I don't want them to move at all. The only transition I want is for the underline to go from left to right in a hover state. I have a codepen link below showing my issue. Again: I do not want my links(Contact, Behance, LinkedIn) to move, just want the underline to appear from left to right when hovered like how it in jsfiddle link I posted above.
Thanks!
My Codepen
http://codepen.io/Chris-Brennan/pen/Gpgvqy
<nav>
<ul id="nav">
<li>Contact</li>
<li>Behance</li>
<li>LinkedIn</li>
</ul>
</nav>
nav{
position:absolute;
right: 0px;
right:350px;
top: 50px;
}
#nav{
list-style-type:none;
}
nav li{
float:left;
margin:0px 10px;
padding-right: 11px;
font-family: 'Lato', sans-serif;
color:#888;
}
nav a{
text-decoration: none;
display: inline-block;
border-bottom: 3px solid blue;
margin-right: 39px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
nav a:hover{
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
border-bottom: 3px solid blue;
width: 55px;
margin-right: 9px;
}
Use pseudoclases instead of animating border. Take a look codepen.io/anon/pen/MaYQEp
this is happening because "nav a" margin-right is not good enough and when you are chaning on hover at "nav a:hover" it pushes the content. as per my knowledge you can achieve this by
using following css in "nav a"
nav a{
text-decoration: none;
display: inline-block;
border-bottom: 3px solid blue;
margin-right: 65px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
and some the css for "nav a :hover "
nav a:hover{
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
border-bottom: 3px solid blue;
width: 55px;
margin-right: 9px;
}
Related
I don't understand why I am able to see through my navigation bar like this. I can even highlight the text through it. Any help guys?
Here's the HTML and CSS, when I test this on an online editor, it works properly. But on my local code, it doesn't.
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
I cant comment, so this appears as an answer but its more a suggestion as I cant see all your code (like where is the Lorem Ipsum coming from?)
You've set the nav to position:fixed, this removes itself from the structure of the DOM. I dont see a z-index property there so that might fix the situation. The text will be hidden behind the navigation if you set the z-index to anything greater than 0.
nav {
position:fixed;
z-index: 1;
...
}
To make sure the text sits underneath the navigation, you may want to set a margin-top to your body tag equating to the height of the navigation bar.
I'm trying to get the transition ease to work on this, but can't. It's a bit trickier to know where to put the transition css when it's targeting something that shows something on hover.
The code is:
<div class="language-box">
<ul>
<li><a href="#" class="call-cs">English
<span class="cs">Coming Soon</span></a></li>
<li>Svenska</li>
</ul>
</div>
And css I'm trying is:
span.cs {
display: none;
}
a.call-cs:hover span.cs {
display: block;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-webkit-transition: background 3s ease;
-moz-transition: background 3s ease;
-o-transition: background 3s ease;
transition: background 3s ease;
}
You can't use transition for display, but change size of your li and it's opacity to create cool transition:
CSS
span.cs {
opacity:0;
height:0;
}
a.call-cs:hover span.cs {
display: block;
height:18px;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
opacity:1;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
transition: all 0.5s ease;
}
li{
position:relative;
}
DEMO
I have a problem where images are appearing over my navigation menu. I have a fixed nav menu that stays at the top of the window, and 8 images that are set to 0.7 opacity lower on the page. The image change to 1.0 opacity when you hover, If you scroll down the images above the nav menu, unless i hover over them, then they appear under the nav like they should.
I will show you my code for the nav, and one of the 8 images, maybe someone can help. this is my first time posting, I hope everything is posted correctly.
Nav:
<div id="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>Folio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Images:
<div id="bg2">
<div class="content-title">
<h2>Folio</h2>
<p> This is what I do </p>
<div class="content-area">
<div class="folio-item">
<img src="images/folio/folio1.png" alt="some_text">
</div>
</div> <!-- content-area close-->
</div> <!-- content-title close-->
Relvent Style:
#nav-container {
width:100%;
height:50px;
box-shadow: 0px 1px 50px #464646;
position:fixed;
top:0px;
background-image: url(images/bggrey.png);
}
#nav {
font-size: 14px;
text-align: center;
line-height: 50px;
}
#nav li{
text-decoration: none;
text-align: center;
display: inline;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
#nav a{
text-decoration: none;
color: rgb(250,250,250);
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#nav a:visited{
text-decoration: none;
color: rgb(250,250,250);
}
#nav a:hover{
text-decoration: none;
color: rgb(250,250,250);
opacity: 0.7;
}
#nav a:active{
text-decoration: none;
color: rgb(250,250,250);
}
#bg1 {
background-image: url(images/bubble.png);
background-repeat:no-repeat;
background-position: center;
height: 800px;
margin: -1;
}
.content-title {
width: 960px;
margin: auto;
font-size: 20px;
color: white;
text-align: center;
padding-top: 70px;
}
.content-title p{
font-size: 14px;
}
.content-area {
border: 1px dashed black;
height: 500px;
width: 960px;
margin: auto;
margin-top: 50px;
font-size: 0px;
}
.folio-item {
float: left;
opacity: 0.7;
}
.folio-item:hover {
opacity: 1.0;
transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
}
If I understand in the right way you want your #nav-container always overlapping the images; then you need the property z-index to manage the level of the elements, try adding this on the CSS:
#nav-container {
z-index:1;
}
I'm working on getting my site up and running, and I've run into a problem with my drop-down navigation menu in Firefox.
I have been using the site in Chrome and it works fine, it is a simple setup of nested lists for the selections. The options appear, but they are floating to the left instead of directly below their appropriate section.
CSS:
/*sub-menu navigation*/
nav.primary ul ul
{
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
z-index: 999;
background: #111111;
height: 0px;
overflow: hidden;
min-width: 100%;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
nav.primary ul li:hover ul
{
opacity: 10;
filter: alpha(opacity=100);
height: auto;
overflow: auto;
}
nav.primary ul ul li
{
float: none;
display: list-item;
border-bottom: 1px solid #747474;
}
nav.primary ul ul li a
{
display: block;
margin-left: 10px;
line-height: 40px;
font-size: 0.8em;
/*text-transform: none;*/
font-family: 'LibbyRegular', Helvetica, Arial, sans-serif;
}
Menu HTML
<ul>
<li>independent work
<ul>
<li>>> big and ugly</li>
<li>>> iceworld</li>
<li>>> gordon's got game</li>
</ul>
</li>
<li>team projects
<ul>
<li>>> blastrobots</li>
<li>>> ruined</li>
</ul>
</li>
<li>scripting
<ul>
<li>>> hero man (C#)</li>
<li>>> CloneOut (lua)</li>
<li>>> shotgun (unrealscript)</li>
</ul>
</li>
<li>resume</li>
</ul>
The site is http://lvsherman.com if you would like to test it.
Try adding to your inner UL elements.
left: 0;
top: WHATEVER;
I am trying to extend my header to cover the full page. http://dev.webgrowth.biz/ and I want it look like this one http://www.webgrowth.biz/ I have been trying everything for hours now. any help would be highly appreciated.
Live Demo
You can achieve the effect using a container element, then just set the containing elements margin to 0 auto and it will be centered.
Markup
<div id="header">
<div id="headerContent">
Header text
</div>
</div>
CSS
#header{
width:100%;
background: url(yourimage);
}
#headerContent{
margin: 0 auto; width: 960px;
}
Just set the header width to be 100vw to make it full screen width
and set the header height to be 100vh to make it full screen height
#header {
margin: 0;
padding: 0;
width: 100%;
background: xxxx;
}
#header #content {
margin: 0px auto;
width: 800px; /* or whatever */
}
<div id="header">
<div id="content">
stuff here
</div>
</div>
Set the max-width:1250px; that is currently on your body on your #container. This way your header will be 100% of his parent (body) :)
The best way to make the header full screen is set height to be 100vh
#header{
height: 100vh;
}
min-height: 100%;
position: relative;
set the body max-width:110%;
and the make the width on the header 110% it will leave a small margin on left that you can fiX with margin-left: -8px;
margin-top: -10px;
Remove the max-width from the body, and put it to the #container.
So, instead of:
body {
max-width:1250px;
}
You should have:
#container {
max-width:1250px;
}
just do
#RandomDiv{
width: 100%;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<ul class="menu">
<li>My Dashboard
<ul>
<li>Learn</li>
<li>Teach</li>
<li>My Library</li>
</ul>
</li>
<li>Likes
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Views
<ul>
<li>Documents</li>
<li>Messages</li>
<li>Videos</li>
</ul>
</li>
<li>account
<ul>
<li>Sign In</li>
<li>Register</li>
<li>Deactivate</li>
</ul>
</li>
<li>Uploads
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Videos
<ul>
<li>Add</li>
<li>Delete</li>
</ul>
</li>
<li>Documents
<ul>
<li>Upload</li>
<li>Download</li>
</ul>
</li>
</ul>
</body>
</html>
css:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
max-width:110%;
margin-left:0;
}
.menu {
height: 40px;
width:110%;
margin-left:-4px;
margin-top:-10px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
demo here
try also resizing the browser tab to see it in action