Long story short I was trying to create a navigation bar but it doesn't quite seem to work as I would like it to. The problem is that if I was to add an image, for example a logo, to my ultimately astonishing navigation bar, the height and position of the anchor would slightly alter. The anchors with text only are of one size, the ones with images are a bit different. I have tried to set the height for the anchor but that doesn't seem to help.
If I have confused you too much, here is the code:
<head>
<title></title>
<style type="text/css">
body {
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
}
#topbar-navigation {
width: 60%;
margin: 0 auto;
height: 40px;
}
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#topbar-navigation li {
float: left;
}
#topbar-navigation li a {
display: block;
text-align: center;
padding: 14px 14px;
text-decoration: none;
margin: 10px;
background-color: #BFCDE3;
}
.topbar-border {
float: left;
border-left: 1px #CCCCCC solid;
height: auto;
margin: 0;
}
.topbar-text {
font-weight: bold;
font-size: 93%;
position: relative;
top: -2px;
}
#topbar-logo {
float: left;
height: 40px;
}
#logo {
height: 32px;
top: -7px;
position: relative;
}
#signin-img {
height: 25px;
margin-right: 10px;
margin-top: -5px;
}
#signin-span {
position: relative;
top: -7px;
margin-right: 15px;
font-weight: bold;
font-size: 93%;
}
#bell-img {
height: 25px;
top: -5px;
position: relative;
}
#more-span {
position: relative;
top: -5px;
font-weight: bold;
font-size: 93%;
height: 40px;
}
#arrow-down-img {
margin-left: 5px;
top: 10px;
position: absolute;
max-width: .9%;
opacity: .6;
}
</style>
</head>
<body>
<div id="topbar-navigation">
<ul>
<li id="topbar-logo"><img id="logo" src="img/logo.png" alt=""></img></li>
<li class="topbar-border" ><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></li>
<li class="topbar-border"><img id="bell-img" src="img/bell.png"></img></li>
<li class="topbar-border topbar-text">News</li>
<li class="topbar-border topbar-text">Sport</li>
<li class="topbar-border topbar-text">Weather</li>
<li class="topbar-border topbar-text">iPlayer</li>
<li class="topbar-border topbar-text">TV</li>
<li class="topbar-border topbar-text">Radio</li>
<li class="topbar-border"><span id="more-span">More</span><img id="arrow-down-img" src="img/arrow-down.png" alt=""></img></li>
</ul>
</div>
</body>
if you want all your items to take the same height, then get rid of floats and height in your code, and apply flex to the ul.
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; //add this to take them in single line
flex-wrap: wrap; //add this to wrap the items to next line when space not available
}
if you need something else, feel free to comment.
body {
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
}
#topbar-navigation {
width: 60%;
margin: 0 auto;
}
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#topbar-navigation ul li {display: flex;}
#topbar-navigation li a {
display: block;
text-align: center;
padding: 14px 14px;
text-decoration: none;
margin: 10px;
background-color: #BFCDE3;
}
.topbar-border {
border-left: 1px #CCCCCC solid;
margin: 0;
}
.topbar-text {
font-weight: bold;
font-size: 93%;
position: relative;
}
#topbar-logo {
float: left;
}
#logo {
}
#signin-img {
}
#signin-span {
position: relative;
margin-right: 15px;
font-weight: bold;
font-size: 93%;
}
#bell-img {
position: relative;
}
#more-span {
position: relative;
font-weight: bold;
font-size: 93%;
}
#arrow-down-img {
margin-left: 5px;
top: 10px;
position: absolute;
max-width: .9%;
opacity: .6;
}
<head>
<title></title>
</head>
<body>
<div id="topbar-navigation">
<ul>
<li id="topbar-logo"><img id="logo" src="img/logo.png" alt=""></img></li>
<li class="topbar-border" ><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></li>
<li class="topbar-border"><img id="bell-img" src="img/bell.png"></img></li>
<li class="topbar-border topbar-text">News</li>
<li class="topbar-border topbar-text">Sport</li>
<li class="topbar-border topbar-text">Weather</li>
<li class="topbar-border topbar-text">iPlayer</li>
<li class="topbar-border topbar-text">TV</li>
<li class="topbar-border topbar-text">Radio</li>
<li class="topbar-border"><span id="more-span">More</span><img id="arrow-down-img" src="img/arrow-down.png" alt=""></img></li>
</ul>
</div>
</body>
Related
I am trying to create a Navigation Menu with dropdown sub-menus. When I am trying to change "display" property from "None"to "Block" for Nested it is not working. Here below is code.
In the Code I have created Main Navigation Menu under with class="nav". and dropdown required on hover over elements in nav class.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS</li>
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use !important in this style because your styles applied on id(which has highest priority in CSS) are not getting overridden by your style.
.nav>ul>li:hover ul {
display: block !important;
}
Also incase of products. the ul was not inside the li element.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
OR
Change your id to class in case of products and services and your code will work without important as well.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.products li {
padding: 9px 0px;
}
.services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul class="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul class="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
This is an issue of specificity: you set the display: none; on an id selector, which has very high specificity, but set display: block; on a very low specificity selector: the descendant selector. The id will override that selector no matter where they show up in the cascade. Consider abstracting your display:none to only be a descendant selector (removing that property from #products, etc.), and it should work fine:
.nav>ul>li ul{
display: none;
}
Some helpful reading:
https://www.w3schools.com/css/css_combinators.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Navigation Menu with dropdown sub-menus
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 150px;
position: absolute;
top: 165px;
right: 206px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.products li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.services {
list-style-type: none;
width: 100px;
height: 147px;
position: absolute;
top: 165px;
right: 85px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.services li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
I would remove the display: none from the services and products css because IDs have high specificity and will override other rules. While !important might temporarily solve this issue, I would not rely on !important as it could cause more issues later on.
You can declare a non-hovered rule with display: block alongside your current hovered rule.
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li ul {
display: none;
}
.nav>ul>li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
I'm trying to create a navbar whith white bars on top of the options, but the position: absolute is not responding as I expect, even if I place it after a position: relative, the white bars are wider than the width of the options:As you can see here
This is the code I'm following from the tutorial, I would appreciate your help.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Another way to achieve the same:
Instead of using the pseudo element, you can use the property border-top along with padding-top to achieve the same, if what you need is the border width to be equal with the length of the option.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
border-top:5px solid #fff;
padding-top:10px;
}
nav a:hover {
color: black;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Here is another way, in-case you need the width of all borders be same. You must give a fixed width to the pseudo element, instead of 100%.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
/*width: 100%;*/
width: 100px;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Your line item element is wider than your link element which means that your white bar will copy the relatively positioned line item's width. If you look in inspector you can see this clearly.
The width
Use the border-top property instead on your links.
nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {
}
On nav a:before :
If you want to create it the same width as your text - substract the padding:
width: calc(100% - 80px);
or you want to place it the same size as your li item use:
left: 0;
You have to account for the 40px * 2 = 80 px of padding you have added to the li element.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: calc(100% - 80px);
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
/*delete padding */
margin-left: 70px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
/*add this */
padding: 40px 0;
display: inline-block;
border-top: 5px solid transparent;
}
nav a:hover {
color: black;
/*and this*/
border-top: 5px solid white;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100px;
}
*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
The nav a::before pseudo-element is a child of a::before. Pseudo-elements like ::before or ::hover are always children of the elements whose selectors preface them. You need to put the position:relative property on the rule for nav a. Currently, you have the position:relative property on the li element, which is wider than the a element.
You'll also need to add some other property to raise the line. I've added padding-top to solve that problem.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
position: relative;
padding-top: 20px;
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
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 have a problem with pure CSS navigation. I floated my top-level items and now all my submenues are hidden inside of the main navigation. I tried with clears, positioning and z-indices and nothing works.
The best I achieved is my top-level menu expanding on hover, whish I don't want. Any advice?
I'm sure this has an answer somewhere, but I have been searching all over youtube, blogs and stack for an answer and couldn't find what I needed.
html {
height: 100%:
}
body {
height: 100%;
}
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
padding: 0;
height: inherit;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
text-align: center;
float: left;
height: inherit;
position: relative;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}
<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item">1.1</li>
<li class="menu-novo-item level-1-item">1.2</li>
<li class="menu-novo-item level-1-item">1.3</li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item">1.4.1</li>
<li class="menu-novo-item level-2-item">1.4.2</li>
<li class="menu-novo-item level-2-item">1.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
[SOLUTION]
It was my stupid mistake all along. I didn't define the background and it was invisible, but there... That's three days of work down the drain.
Try this one.
html {
height: 100%:
}
body {
height: 100%;
}
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
display: inline-block;
height: inherit;
margin: 0;
padding: 0;
width: 100%;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
float: left;
height: inherit;
position: relative;
text-align: left;
width: 100%;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}
<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item">1.1</li>
<li class="menu-novo-item level-1-item">1.2</li>
<li class="menu-novo-item level-1-item">1.3</li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item">1.4.1</li>
<li class="menu-novo-item level-2-item">1.4.2</li>
<li class="menu-novo-item level-2-item">1.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I'm trying to design my nav (4 items in total) to be in circles each spaced about 20 px apart, located on the top right of my screen. I got everything to "work" design wise, however, now that every nav item appears how I want it (in its own a circle), when I go to have them all positioned on the upper right the first 3 nav items have disappeared and only the 4th nav item is visible. Please help!
HTML:
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
CSS:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: absolute;
top: 50px;
right: 100px;}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
What about this:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 120px;
float: left;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
Try:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
It's because your navbutton elements have position: absolute so they overlap each other, i.e. only the last one is visible.
Try this snippet:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 20px;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
If you want the navigation to be in the top right corner of the page use this CSS:
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav li {
display: inline-block;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 100px;
margin: 20px;
}
#nav{
position:absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
margin: 20px;
float:left;
}