I am trying to create a responsive menu as follows.
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
width: 100%;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
But the menu entries are overlapping in small screens. Why this problem is happening? Also, I have set width to 100%, but entries does not change size in small screens as expected.
You need to set the display:inline-block for the anchor tag
.menu li a {
display: inline-block;
}
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
display: inline-block;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
display:block;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
width: 100%;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
anchor by default has display: inline property. you need to set it to display:block if you need full-width or set it to display:inline-block to take the size as per the text.
Related
i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>
Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>
I have a CSS Menu which i have had some help with getting sorted, it nearly works as i would like.
i just want to be able to change the text colour on LI hover and also the sub menu seems to be displaying more to the right when it should be directly underneath
CSS:
.menu-my-integra-container {
border:1px solid black;
display:block;
float:left;
}
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra > li {
float:left;
display: block;
margin-right:0px;
position:relative;
background:#F36F25;
padding:8px;
color:#FFFFFF;
text-decoration:none;
}
#menu-my-integra > li:hover {
background:#FFFFFF;
color:#F36F25;
}
ul.sub-menu {
display:none;
width:200px;
position:absolute;
z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
background:#F36F25;
}
ul.sub-menu li {
color:#FFFFFF;
float:none;
padding:5px;
}
ul.sub-menu li:hover {
color:#F36F25;
background:#FFFFFF;
float:none;
padding:5px;
}
http://jsfiddle.net/c2u21366/
This will change the texts color to the parents:
#menu-my-integra li > a {
color: inherit;
}
Add left: 0; to ul.sub-menu to align your sub-menu to the left.
ul.sub-menu {
left: 0;
}
You color attribute needs to point to the anchor tag rather than the list tag. The colour choice is being overwritten by the default browser style. You need a more direct style path. The following CSS will colour your list as
.menu-item a{
color:#FFFFFF;
}
.menu-item a:hover {
color:#F36F25;
}
css file
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Your submenu is not properly positioned. You're missing left: 0;. That should fix the positioning.
ul.sub-menu {
display: none;
width: 200px;
position: absolute;
z-index: 1;
left: 0;
}
In regards to hover color
a:hover {
color: #000 !important;
}
Ofcourse I used !important cause I don't understand which color you actually want to change.
I have a simple <nav> with an unordered list inside:
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li a:nth-child(1):hover {
background: red;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I am trying to make a different color on hover for each child <a>
but instead it is selecting all of them (highlighting them red)
nav li a:nth-child(1):hover {
background: red;
}
What am I doing wrong?
All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:
nav li:nth-child(1) a:hover {
background: red;
}
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: red;
}
nav li:nth-child(2) a:hover {
background: #555;
}
nav li:nth-child(3) a:hover {
background: green;
}
nav li:nth-child(4) a:hover {
background: blue;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: green;
}
nav li:nth-child(2) a:hover {
background: blue;
}
nav li:nth-child(3) a:hover {
background: pink;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing?
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
I went ahead and put it on jsfiddle Here
I assume that you actually want to center the list items rather than just the menu.
JSfiddle Demo
Revised CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center; /* added this */
font-size:0; /* whitespace adjustment */
}
ul li {
font-size:1rem; /* font-size reset */
display: block;
position: relative;
/* float: left; removed this */
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Do you want the whole menu centered? If so, it helps to stick that all within something, like a table or div
so I added the following to your code:
css
#navbar {
width: 50%;
margin: 0 auto;
}
html
<div id="navbar">
all your ul/li's
</div>
all together
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
#navbar {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle that demo's what I think you're after: JSFiddle
Basically, I changed your parent <li> to display: inline-block and removed the float: left property. To center those parent nav items, I applied text-align: center to the parent <ul>. Then I changed the nested dropdowns ul ul to be text-align: left and then set those <li>'s to display: block.
Final CSS (changed some selectors to target differently):
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* added this */
}
ul > li {
display: inline-block; /* changed from display: block */
position: relative;
/*float: left;*/
}
ul ul { text-align: left; } /* added this */
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!