I'm trying to center the navigation, but I haven't succeeded yet. The idea is that the navigation moves along as the user scrolls the page. It has to be responsive as well, because navigation should always be displayed. So I've come up with this:
<nav id="nav" class="container">
<ul>
<li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
<li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
<li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
</ul>
</nav>
And the CSS:
#nav
{
position: fixed;
}
#nav ul
{
list-style: none;
padding-left: 0;
text-align: center;
}
#nav li
{
display: inline-block;
}
#nav a
{
color: rgb(255,255,255);
font-family: 'Open Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.3em;
display: block;
margin-right: 80px;
height: 100px;
width: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height: 100px;
}
#nav a.avaleht
{
background: rgb(168,191,18);
}
#nav a.massaazh
{
background: rgb(255,159,0);
}
#nav a.kontakt
{
background: rgb(0,170,181);
}
#nav a:hover
{
text-decoration: none;
background: rgb(66,64,62);
}
And this is how I'd like it to work:
Thank you very much.
Just add left:0; right:0; to the fixed #nav element:
#nav {
position: fixed;
left:0; right:0;
}
Then remove the margin-right for the last li element's child anchor element:
#nav li:last-child a {
margin-right:0;
}
Example Here
#nav {
position: fixed;
left:0;
right:0;
}
and replace margin-right:80 with margin:5px 40px
#nav a{
margin: 5px 40px;
}
Related
I need the last tab (About) to float to the right and the others to the left. It all floats left.
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li>ABOUT</li>
</ul>
</div>
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.aboutRight {
position: fixed;
float: right;
left: 100px;
}
First of all have style for class aboutRight .aboutRight and your link has ID <li>ABOUT</li>. Rewrite id into class as it's a bad practice to use IDs for styling.
Second, you don't need position:fixed; in this style, it won't take space in a parent container, you need this link to be in a same position as other links.
Third, you should apply that class not to the <a> tag, but to the <li> element, because you want to float right <li> inside of <ul>, not <a> inside of <li>
And lastly, since you have this rule .nav li { float: left; } and want to override it for a certain li, you should write more specific selector, not just a class, e.g. nav li.aboutRight
I created a snippet for you with working code.
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.nav li.aboutRight {
float: right;
left: 100px;
}
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li class="aboutRight">ABOUT</li>
</ul>
</div>
I have this simple menu with submenu.
<div id="menu_footer_bg">
<div id="menu_line"></div>
<ul id="menu_footer">
<li>About</li>
<li>Works
<ul>
<li>Electroacoustic</li>
<li>Instrumental</li>
</ul>
</li>
<li>Projects</li>
</ul>
</div>
and a simple css.
#menu_footer_bg {
position: fixed;
top: calc(100% - 50px);
height: 50px;
width: 100%;
opacity: 0.99;
background-color: rgb(20, 20, 20);
}
ul#menu_footer {
padding: 0;
margin-left: 18%;
margin-top: 1%;
}
ul#menu_footer li {
display: inline;
}
ul#menu_footer a {
color: white;
padding: 5px 20px;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 4px 4px 4px 4px;
}
ul#menu_footer a:hover {
background-color: orange;
}
ul#menu_footer li ul {
clear:both;
position:absolute;
background-color: rgb(20, 20, 20);
display:none;
margin-bottom:-20px;
}
ul#menu_footer li:hover ul {
display:block;
bottom: 100%;
}
ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
}
I would like the menu to be horizontal and the submenu to be vertical.
Reading here and there I thought that this code was right - adding "display:inline" within the "li" tag of the menu.
But now, also the submenu is horizontal and I don't know how to rool back to vertical.
Read about > (Direct Child) css selector. Your styles for li are applying to all children but we need only for direct children of #menu_footer_bg
#menu_footer_bg {
position: fixed;
top: calc(100% - 50px);
height: 50px;
width: 100%;
opacity: 0.99;
left: 0;
background-color: rgb(20, 20, 20);
}
ul#menu_footer {
padding: 0;
margin-left: 18%;
margin-top: 1%;
}
ul#menu_footer > li {
display: inline-block;
vertical-align: top;
position: relative;
}
ul#menu_footer a {
display: block;
color: white;
padding: 5px 20px;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 4px 4px 4px 4px;
}
ul#menu_footer a:hover {
background-color: orange;
}
ul#menu_footer li ul {
position:absolute;
background-color: rgb(20, 20, 20);
display:none;
left: 0;
bottom: 100%;
list-style: none;
padding: 0;
}
ul#menu_footer li:hover ul {
display: block;
}
<div id="menu_footer_bg">
<div id="menu_line"></div>
<ul id="menu_footer">
<li>About</li>
<li>Works
<ul>
<li>Electroacoustic</li>
<li>Instrumental</li>
</ul>
</li>
<li>Projects</li>
</ul>
</div>
Add this in your CSS
ul#menu_footer li ul li{
display: block;
}
Working Fiddle
Just add this to your code
ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
display:block;
}
https://jsfiddle.net/adit_999/6tuc1rqz/
Is there a way to get this navigation bar to always been in the middle of the page? I'm sure using percentages will be the best way. I added in which line I think needs changing. I'm just trying to get used to CSS. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
position:absolute;
background:#CCC;
width:100%;
top:100px;
left:0;
height:23px;
padding: 0;
text-align:center;
font-size:20px;
font-weight:light;
}
.ty-menu__items {
position: absolute;
left:20%; /* This is the line that needs changing, I think*/
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
}
.ty-menu__item {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: light;
color: #FFF;
background: #CCC;
text-align: center;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: #000;
border-bottom: 4px solid #fff;
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">Home</li>
<li class="ty-menu__item">News</li>
<li class="ty-menu__item">Contact</li>
<li class="ty-menu__item">About</li>
</ul>
</div>
</body>
</html>
Remove the left property from your ul, then remove the float property from your li's, and instead make the li's display: inline-block; so you can simply text-align: center; them. Code below:
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
}
I've got little problems with my header that has to be symetrically perfect and I'm terrible at this so could you please tell me how to make the it positioned on the center and keep the margin between links?
How should it look like:
I'd also love to know how to make that underline on hover and the simple language switcher.
My code:
<nav id="nav">
<ul style="text-transform:uppercase">
<li>Strona główna</li>
<li>Portfolio</li>
<li><img src="logo.png"></img></li>
<li>O mnie</li>
<li>Kontakt</li>
</ul>
</nav>
CSS:
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
margin-left:30%
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
Removed a lot of margin and padding from your code.
Added position: relative;, text-align: center;, width: 100%; to #nav.
Also, Added margin:0; and padding:0; to *
Note: You didn't have img in li for some reason.
Change to this:
*{
margin:0;
padding:0;
}
#nav {
position: relative;
top: 0;
height: 3em;
line-height: 3em;
text-align: center;
width: 100%;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
For underline on hover.
Try this:
#nav ul li a:hover {
border-bottom: 3px solid #eee;
}
JSFiddle Demo
Add this to your css to make link underlined when hover.
#nav ul li a:HOVER{
text-decoration : underline;
}
Update your Nav class like below.
#nav {
position: absolute;
right: 0;
top: 0;
left:0;
margin:0px auto;
height: 3em;
line-height: 3em;
}
DEMO
You can center stuff on your webpage with the CSS property text-align:center;
As for the underline on hover? Just add an onhover event handler to it, then use document.getElementById("Makeanidforthestuffyouwantunderlined").class="Someclass";
in your javascript.
Finally, you can go to your CSS, and do this.
.Someclass{
text-decoration:underline;
}
Alternatively, some elements support the "hover" pseudo element.
p:hover{
text-decoration:underline;
}
I'm creating a Horizontal menu with a single line drop down sub nav.
When I rollover my main navigation links it displays the sub nav but pushes the rest of the content to the right. I would like the submenu to appear to the far left of the main menu and for it not to affect the main menu. Thanks!
Fiddle
HTML
<ul id="nav">
<li>LINK1</li>
<li>LINK2
<ul>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li>LINK6</li>
</ul></li>
<li>LINK7</li>
<li>LINK8</li>
CSS
#nav{
display:block;
list-style:none;
text-align: left;
}
#nav a{
width: 50px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border-left: 1px solid #999999;
float:left;
padding: 10px 5px 5px 5px;
}
#nav a:hover, #nav a:focus {
background: #999 ;
color:#333;
}
#nav li {
height: 30px;
display:block;
position:relative;
float:left;
}
#nav li ul {
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
position: relative;
left: 0;
clear: both;
}
#nav li li a{
width: 50px;
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999;
color:#666666;
padding: 5px 0 5px 0;
z-index: 10000;
vertical-align: middle;
}
Made a few changes and it's working, mainly:
#nav li:hover ul {
left: 0;
top: 100%;
white-space: nowrap;
word-spacing: -1em;
clear: both;
}
#nav li li {
word-spacing: normal;
display: inline-block;
float: none;
}
jsFiddle Demo
you can use it too
fiddle : http://jsfiddle.net/8GYbh/9/
#nav li {
height: 30px;
display:inline;
}
#nav li:hover ul {
position: absolute;
left: 0;
clear: both;
top:45px;
}