So what i want to happen is for the background of the current link(the link of the page you are currently on) to turn a seperate color and also for the font color to change to white. I also want this same effect to occur on a:hover (for links you are hovering over). I have gotten very close to this effect, however my one issue is that to change the font color of a:hover the mouse needs to be directly over the link and not simply within its container. I understand why this would not work since im giving this property to the link specifically and not the list, but font color changes for the "a" dont work if i put them with #nav li.
The effects i want are similar to those of the NavBar on this page http://www.vitalsmarts.com/
CSS/HTML:
<style>
#nav{
list-style-type:none;
text-align:center;
height:50px;
background-image:url("image/menuBg.png");
}
#nav li {
float:left;
width:155px;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
}
#nav li:hover {
background-color:#143D17;
color:#FFFFFF;
}
#nav li a:hover {
color:#FFFFFF;
}
#nav li a.currentFont {
color:#FFFFFF;
}
.navPadS {
padding:13px 0px;
}
.navPadL {
padding:13px 12px;
}
.navPadLL {
padding-top:13px;
padding-bottom:13px;
padding-right:20px;
}
.current {
background-color:#143D17;
}
</style>
<body>
<!Header and NavBar>
<div id="navCont">
<ul id="nav" class"tbBord">
<li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
<li class="navPadLL">home</li>
<li class="navPadL">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
</ul>
</div>
</body>
</html>
add this to your css
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
display:block;
}
Don't style the li's just float them left and put all your style in the a's. I've created this example on JS Bin but the bit that matters is:
#nav li {
margin:0;
padding:0;
float:left;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
width:155px;
display:block;
padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
background-color:#143D17;
color:#FFFFFF;
}
Related
Looking to find out how to change a single nav link to have a different background hover color than the others.
I've tried #nav #contact.hover and #nav #contact:hover to no avail.
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
</html>
CSS:
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li a:hover {
background-color:black;
}
Should change the contact element in the nav to have a background hover color of white
Just have to get the selector right. I think you were having issues because your base style for hover is overly specific which trumps most overrides.
#nav ul li:hover a
...could easily be changed to simpler selector that would be easier to override, the use of ID's instead of classes adds to the specificity issue as well.
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li:hover a {
background-color:black;
}
#nav ul li#contact:hover a {
background: url('https://picsum.photos/100');
}
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
You can accomplish this by using the :last-child psuedo-class in your CSS.
Here's a codepen with the fix but I'll describe below what I did: https://codepen.io/Athys/pen/WBdYdZ
I added :last-child to the li selector since the "contact" link appears as the last list item (the last li). Then, I added a :hover psuedo-class to the a selector and give it a different hover color and text-color than the other a elements. Hope this helps.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I'm working on a wordpress site for a client.
I have the navigation working and when they hover over the navigations, they will get a green background. This is true for each link-navigation item.
I also want the selected page have that same background, so the visitor of the site, knows where he currently is.
What I have so far:
Wordpress:
<div id="nav">
<?php wp_nav_menu ( array ('theme_location' => 'header-nav','container' => false)); ?>
</div>
CSS:
#nav {
/*float:right;*/
float:left;
height:6em;
/*width:560px;*/
/*width:612px;*/
width:710px;
/*background:#525252;*/
}
#nav ul {
list-style:none;
}
#nav li a{
width:80px;
text-align:center;
}
#nav li a {
text-decoration:none;
float:left;
padding:3.4em 0.4em 0 0;
position:relative;
right:-1em;
/*left:6em;*/
color:#fff;
height:2.1em;
}
#nav li a:hover{
color:#333;
/*background:#60b5b2;*/
background:#69dc37;
font-weight:bold;
}
#nav li a:active {
color:#fff;
background:#69dc37;
}
I was searching the internet and found a post about menu highlighting. I tried that, but it didn't worked.
I need some advice/help on this to get the active-link (background) working.
Please correct background to background-color in your CSS code:
#nav li a:hover{
color:#333;
/*background:#60b5b2;*/
background-color:#69dc37;
font-weight:bold;
}
#nav li a:active {
color:#fff;
background-color:#69dc37;
}
I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks
/* navigation menu */
div#navigation {
height:55px;
background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
background:transparent url('images/nav-left.png') no-repeat scroll top left;
height:55px;
}
div#navigation ul {
background:transparent url('images/nav-right.png') no-repeat scroll top right;
list-style:none;
margin:0;
padding:0 10px;
position:relative;
top:0;
height:55px;
display:block;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:32px;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
font-size:1.2em;
padding:14px 20px 9px;
border-right:1px solid #060D14;
border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
border-left:none;
}
div#navigation ul li.navright a {
border-right:none;
}
div#navigation ul li a:hover {
color:#FC8228;
}
<div id="navigation">
<div id="innernav">
<ul>
<!-- top navigation -->
<!-- add class navleft to first item and navright to last item as shown -->
<li class="navleft">home</li>
<li>examples</li>
<li>solutions</li>
<li>our service</li>
<li>support</li>
<li class="navright">contact</li>
</ul>
</div>
</div>
Here is an example that uses the suckerfish methodology:
http://jsfiddle.net/uCdGc/
Here is the magic CSS:
/* Code for dropdown */
#navigation ul li ul {
position: absolute;
left:-999em;
}
#navigation ul li ul li {
float:none;
/* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
left:auto;
margin-top:55px;
}
For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/
What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.
Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.
Good luck.