I'm trying to keep the parent nav background active when on child page.
Example: Portfolio---->Programs
When my current page is Programs, I'd like to keep the Portfolio active on the navigation bar.
The code use in the CSS is:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
max-height: 200px;
}
#nav .container ul {
list-style: none !important;
}
#nav .container ul li {
list-style: none !important;
}
#nav .container ul span:last-child li,
#nav .container ul > li:last-child {
/*background: none;*/
background:url(surf_40.gif) no-repeat -12px;
}
#nav ul li a {
display: block;
font-size:30px;
line-height: 35px;
padding: 10px 0;
color: rgba(255,255,255,0.4);
padding: 2px 25px 2px 21px;
border: 0;
outline: 0;
list-style-type: none;
position:relative;
right:-4px;
z-index:1;
text-transform: uppercase;
font-family: 'Aller', sans-serif;
}
#nav ul li#active a {
background: url(surf_40.gif) no-repeat -12px;
}
#nav ul li#active a,
#nav ul li a:hover {
color: #fff;
border: 0;
}
/**Text modified added - for active parent while my current page is a sub-menu***/
#wsite-menus .wsite-menu li #active a #nav ul li a {
color: #fff;
border: 0;
}
/*---*/
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
color: rgba(0,0,0,0.4);
font-weight: bold;
background: #fff;
/*border: 0 px;*/
border: solid thick;
border-radius: 1em;
/* fine modifica*/
position:relative;
right: 0 px;
}
#wsite-menus .wsite-menu li a:hover {
color: #000;
background: #e3e3e3;
border: solid thick orange;
}
thank you for any help..
HTML code:
<div id="nav">
<ul class='wsite-menu-default'>
<li id='pg962547086691527768'><a href="/" data-membership-required="0" >Home</a></li>
<li id='pg623326219140352077'><a href="/about.html" data-membership-required="0">About</a</li>
</ul></div>
Put the :hover on li's instead of a:hover and alos add class active to li. if you provide html two then i will provide you the perfect solution thanks
Related
there is a double red line on hover state on my active link (another red line appears on dropdown menu. How to fix this. Also when i moving on dpopdown menu active state dissapears.
JSFIDDLE
Thank you.
Have a nice day.
[1]: http://jsfiddle.net/uj5k5ecq/
Adding a new class .jqueryslidemenu ul li a.active:hover and giving it a border-bottom:0; should do it, but there's something that I'm trying to figuring out is why the drop down is not filling that 5px removed from the border-bottom ... until now I have this:
.jqueryslidemenu ul li a.active:hover {
border-bottom:0;
}
======== Update ==========
I figured it out, it's somehere in your jquery code (probably in your file jqueryslidemenu.js) that has a static position for your dropdown of top:56px; by giving a new top value for .jqueryslidemenu ul li ul through your css like this it will fix this issue
.jqueryslidemenu ul li ul {
top: 51px !important;
}
Online demo here
but perhaps you should find that value and change it there tho, where this top:56px; is being created
One option is to remove the on hover underline by adding this to your CSS:
#nav a:hover{text-decoration:none;}
Another option is to remove the red border when you hover over a dropdown by removing border-top: 5px solid #eb2629;. Example below:
.jqueryslidemenu ul li ul {
position: absolute;
left: 0;
margin-left: -1px;
border-top: 5px solid #eb2629; /** REMOVE THIS LINE **/
display: block;
visibility: hidden;
background: #000;
z-index: 99999;
}
A third option is to remove the active red border when you hover over the link itself:
.jqueryslidemenu ul li a.active {
border-bottom: 5px solid #eb2629; /** REMOVE THIS LINE **/
color: #eb2629;
}
Just add
#nav a {
text-decoration: none;
}
View DEMO
Your question is not very clear but I think you might mean something like this?
http://jsfiddle.net/uj5k5ecq/3/
#nav {
float: right;
margin-top: 70px;
position: relative;
}
.jqueryslidemenu ul {
z-index:9999999;
}
.jqueryslidemenu ul li {
position: relative;
float: left;
list-style:none;
}
.jqueryslidemenu ul li a {
font-weight: normal;
text-transform: uppercase;
font-size: 13px;
margin-top: 18px;
padding: 0px 20px 15px;
display: block;
text-decoration:none;
color:#000;
}
.jqueryslidemenu ul li a:hover {
border-bottom: 5px solid #eb2629;
color: #eb2629;
}
.jqueryslidemenu ul li a.active {
}
.jqueryslidemenu ul li ul {
position: absolute;
left: 0;
margin-left: -1px;
border-top: 5px solid #eb2629;
display: block;
visibility: hidden;
background: #000;
z-index: 99999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
float: none;
font-size:12px;
width: 160px;
text-transform: none;
background-color: #000;
}
.jqueryslidemenu ul li ul li a {
margin: 0px;
color:#fff;
padding: 10px 20px 10px;
border-bottom: none;
text-transform: none;
}
.jqueryslidemenu ul li ul li a:hover {
background:#232323;
color: #FFF;
border-bottom: none;
text-transform: none;
}
The images of list items in dropdown menu repeats three times even though "no repeat" is added in html. please help me.
html code.
<div class="menu">
<ul>
<li style='background-image:url(images/menu2s.jpg)0 0 no-repeat;'><a></a>
<ul>
<li style='background-image:url(images/sets.jpg)0 0 no-repeat;'>Settings</li>
<li style='background-image:url(images/more-icon.png)0 0 no-repeat;'>More</li>
</ul>
</li>
</ul>
</div>
css file
body{padding: 3em; }
.menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;}
.menu {
position: absolute;
bottom:0px;
float: left;
line-height: 10px;
left: 100px;
z-index: 50;}
.menu a {
display: block;
text-decoration: none;
color: #3B5330;}
.menu a:hover { background: #B0BD97;}
.menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
.menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index:50;
}
.menu ul li ul li a {
font: 22px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
z-index:50;}
.menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
z-index:50;}
.menu ul li a {
font-weight: bold;
padding: 15px 10px;
z-index:50;}
.menu li{
position:relative;
float:left;
z-index:50;}
.menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;
z-index:50;}
.menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
z-index:50;}
.menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
z-index:50;}
.menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
z-index:50;
}
.menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
z-index:50;
}
Write it like this. You wrote shorthand in background-image rather than Background.
style='background:url(images/sets.jpg) 0 0 no-repeat;
> or
style='background:url(images/sets.jpg) no-repeat 0 0 ;
You have not given space between the brace and zero.
I have a CSS menu using the following CSS.
What is the best way to center the whole menu on the page?
I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
You can center the navigation bar by using the following CSS rules:
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.
Instead of floating the li, you can display them as inline-blocks.
Then, they will be centered relatively to the ul because of text-align: center.
Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li>Add Contact</li>
<li>View Contact</li>
<li>Tickets
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
First, when you float the ul's you have to clear the float by adding clear div:
HTML :
<div class="clear"></div>
CSS :
.clear{
clear:both;
}
And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
Take a Look:
http://jsfiddle.net/njuVm/6/
I'm trying to fix my drop down menu but I'm having problems with the highlighted colour and the background colour/size.
When I hover it, it is not covering the full button with orange like I want it to and, it has some grey left in it from the background where I don't want it to be.
One of the issues may be the fact I'm using 2 style sheets for mobile and computer.
HTML:
<div id="nav">
<ul id="menu">
<li id="active">Home</li>
<li>About Revelstoke</li>
<li>Ticker Rates</li>
<li>Snow School
<ul id="sub-menu">
<li>Kids Lessons</li>
<li>Adult Lessons</li>
<li>First Tracks</li>
</ul>
</li>
<li>Weather</li>
<li>Gallery</li>
<li>Trail Maps</li>
<li>Contact Us</li>
</ul>
</div><!--close nav-->
CSS (computer):
#nav {
background-color:#eee;
height: 33px;
border-top: solid black 2px;
border-bottom: solid black 2px;
min-width: 1000px;
}
#nav #active a {
font-weight: bold;
color: #ffffff;
background-color: #0160a2;
padding: 5px 15px 8px 15px;
}
#nav ul {
text-align: left;
font-size: 18px;
background-color: #eee;
}
#nav ul li {
display: block;
position: relative;
float: left;
line-height: 24px;
}
#nav ul li a {
display:inline;
padding:5px 10px 8px 10px;
background-color: #eee;
}
#nav li ul {
display: none;
}
#nav li:hover ul {
display: block;
position: absolute;
margin-top: 6px;
padding: 0;
width: 97px;
height: 82px;
}
#nav li:hover li {
font-size: 14px;
}
#nav ul li a:hover {
background-color: #ff8a00;
color: #000000;
}
#nav ul li ul li a{
padding:5px;
}
#nav ul li ul li a:hover{
padding:5px;
width: 97px;
height: 82px;
}
CSS (mobile):
#nav {
background-color:#eee;
}
#nav ul {
text-align:center;
font-size: 18px;
}
#nav ul li {
list-style-type:none;
border-top: 3px solid white;
}
#nav ul li a {
color: #000000;
display:block;
padding:13px 0;
text-decoration:none;
font-weight: bold;
}
#nav ul li a:hover {
background-color: #0096ff;
font-weight: bold;
color: white;
}
#nav #active a {
background-color: #01385e;
font-weight: bold;
color: white;
}
If I understood your question this should be a solution http://jsfiddle.net/GcDGv/2/ (I worked only for non-mobile CSS), this is how I fixed it:
I removed all height properties from classes related to the sub-menu. They can be auto-calculated.
Change the width of li elements in sub-menu to 100%, so now they will use whole area.
Make links in sub-menu as block elements, so margin/paddings from top and bottom will work as you want. And removed width and height properties from last style ul li ul li a:hover
I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.
New user, can't upload image
If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.
/* Dropdown Menu */
#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #3636FE;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }
Fixed. (at least for Chrome+Firefox+IE9)
http://jsfiddle.net/QZWj3/4/
You had to add width: 100% to #nav li:hover ul and to #nav li:hover li