The lines of Code bellow does everything it is asked to do except for one thing, It doesn't change the color of the selected link but it assigns a background to it as asked. It is part of a WordPress Theme.
#rack #header #nabar ul li a {
color: #FFC;
}
#rack #header #mainNav ul li.current-menu-item {
height: 21px;
width: auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 4px solid #EBF3EE;
background-color: #EBF3EE;
float: left;
position: relative;
padding-bottom: 19px;
color: #000;
}
Assuming the selected node markup has an a tag, I would suggest targeting the a tag within the selected li. This should be sufficient to override your base a tag properties.
#rack #header #mainNav ul li.current-menu-item a {
color: #000;
}
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I am trying to vertically stack a sub-menu, however, I am having trouble getting it to stack possibly due to some of the parent styling. The goal is for the sub-menu to stack vertically underneath the very first link. Any advice?
JSFIDDLE
CSS
nav {
height: 70px;
background: transparent;
}
nav ul {
display: inline-block;
list-style: none;
height: 70px;
float:right;
}
nav ul li {
display: inline-block;
background: transparent;
float: left;
padding: 0px 10px;
padding-top: 23px;
height: 43px;
border-top: 4px solid $White;
}
nav ul li:first-child {
border-top: 4px solid $White;
}
nav ul li a {
font-family: 'Lato', serif;
font-size: 14px;
color: $TextColor;
line-height: 122%;
letter-spacing: 1.5px;
padding-left: 0;
}
nav ul ul {
display: block;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
}
Man, you really need to learn what you are doing. It was quite some effort to correct your code. For a start, you seem to be unaware of the fact that
nav ul { ... }
will not only affect your outer <ul>, but also your inner <ul id="submenu">.
The fact that you use id="submenu" strongly suggests that the next thing you might be unaware of is that per HTML document, any given id value must be unique, that is it can only be used on one element.
https://jsfiddle.net/gmtugks5/2/
http://jsfiddle.net/zcfqu/
Been playing around with this piece of code for a while and am confused a bit.
How do I:
Change the color of the each submenu?
Make the submenu the same width as the main button?
HTML
<ul id="menu">
<li>This is the button
<ul class="submenu">
<li>Button one
</li>
<li>Button two
</li>
<li>Button three
</li>
</ul>
</li>
</ul>
Remove all floats and position:absolute
Check this demo
I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)
Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.
#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }
.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }
EDIT 1
Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O)
EDIT 2
CSS shorthands - MDN
font shorthand - W3C
background shorthand - W3C (scroll to the very bottomo of the page)
Change the color of the each submenu
ul.submenu a:hover {
background-color: red !important;
}
This changes on hover. If you want it always the same color remove :hover
Make the submenu the same width as the main button
ul.submenu, ul.submenu>li {
width: 100%;
}
This way you don't need to apply a fixed width. The browser will calculate it using parents adapted width.
Demo
Here is the correct approach in tackling your issues
DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/
// be more specific when targeting
ul#menu ul.submenu li a:hover {
background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
width: 100%;
}
// assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
background: red;
}
ul#menu .submenu li.btn2 a {
background: yellow;
}
ul#menu .submenu li.btn3 a {
background: blue;
}
Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle
ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;
ul#menu li a for the background
I've set each li as 150px width. This has fixed the issue.
http://jsfiddle.net/andaywells/zcfqu/34/
ul#menu ul.submenu li {width: 150px;}
You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
font-family: Helvetica;
background-color: #57AD68;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
font-size: 12px;
font-style: normal;
font-weight: 400;
height: 40px;
line-height: 39px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: bottom;
border-radius: 3px 3px 3px 3px;
border-style: none none solid;
border-width: 0 0 1px;
cursor: pointer;
display: inline-block;
float: center;
list-style-type: none;
text-decoration: none;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
/* Main Button */
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 0 20px;
background: ; /*Remove the color here to avoid overlapped*/
float:right;
border-radius: 2px 2px 2px 2px;
font-family: Helvetica;
}
ul.submenu a:hover {
background: red;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:right;
background-color:green; /*Adjust the color of sub menu.*/
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: ;
}
ul#menu li:hover li a:hover {
opacity:0.9;
}
I'm designing a Homepage like this: https://dl.dropboxusercontent.com/u/178536659/new/Document.htm and I'm currently working on the dropdown menu. My problem is that my dropdown menu is not fully displayed. I tried so many ways such as using "float: left" (what what I'm using now) or using "dislay:inline" for the ul li, it still doesn't work.
try this
in this class #nav li ul z-index give then menu show properly,
#nav li ul {
background-color: black;
display: none;
left: -60px;
margin: 0;
padding: 0;
position: absolute;
width: 257px;
z-index: 1;
}
#nav ul li ul li {
border-bottom: 2px solid #2185C5;
padding: 14px;
width: 89%;
}
Add the following to remove the extra blue border:
#nav ul li ul li {
padding: 14px 25px 14px 14px;
border-bottom: 2px solid #2185C5;
width: 100%;
margin-left: -40px;
}
#aftercolor {
position: absolute;
top: 99px;
height: 8px;
width: 960px;
background-color: #2185C5;
}
also add margin:0 to your body to make your site good looking.
body{
margin: 0;
}
At this Test Link I seek to install header and main site navigation on to the top of a blog script. The drop down menu has wide gaps appearing between each of the page links! This does not render like this on the main site which has the same code! What is required to close the gaps?
The dropnav styling is like this:
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
you have li padding bottom and li padding top try to removing them (or remove one of them and decrease padding for one of them) and also you have same class dropnav for the div and also the ol try changing one of them to a different class and remove border-style: solid; this should fix your issue.
On line 169 of site_template.css, you have this rule:
li {
padding-bottom: 2px;
padding-top: 2px;
}
You either need to remove this, or override it using something like:
.dropnav li { padding: 0px; }
Remove the padding on li on line 167 of style_template.css