I just tried to remove the MagicLine that was built into my Wordpress theme by taking out the CSS code that I'll put below. It worked and the line is gone but now my navigation is all jumpy as you can see at the site: http://sheisbiddy.com/home/ Is there a better way to remove the line (I can't seem to find it in the piles of code that came with the theme) or anyway to get the menu back to normal? Thanks!
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left: 0; display: none; }
This is what is left for the navigation CSS:
#header {height: 100px; padding-top: 20px; margin: 0 auto; }
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation {float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:inline; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:inline; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:inline; padding:0; }
#navigation li:hover ul { display:inline; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
you have an errors in you CSS which causes the navigation to behave this way...
in style.dynamic.php file :
Lines : 94,96,104
#tagline { background-color:; }
#navigation ul li { padding-bottom:px; }
#navigation ul li a { padding-top:px; }
Related
I am creating a personal website for my programming class and I'm having trouble having my "li" tags items drop down, but instead their going off to the right. For example I hover over my "li" tag to have my drop down "li" items drop down. But instead they drop down and go to the right. I want them to go straight down. Any help?
Here is the CSS (And yes I know that some of my CSS is repeated and unnecessary) :
#nav {
background-color:#222;
margin:-15px;
margin-left:230px;
margin-right:230px
}
#nav_wrappper {
width: 960px;
margin: 0 auto;
text-align:left;
}
#nav ul {
list-style-type: none;
text-align:center;
margin: 0 auto;
position: relative;
display:inline-block;
width:100%;
}
#nav ul li {
display: inline-block;
position:relative;
width:33%;
float:left;
}
#nav ul li:hover {
background-color:#333;
}
#nav ul li a,visited {
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul {
display:none;
position: absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left: -5px;
min-width:160px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a, vistited{
color:#ccc;
}
#nav ul ul li a:hover {
color:#099;
}
here is css
in this css i have #menu as ID of Main Menu Ul
i made change in display properrty but not any expected effect
/*Initialize*/
#menu
{
list-style:none;
padding:0;
margin: 0;
width:100%;
left:auto;
background-color:Gray;
}
ul#menu li ul.sub-menu
{
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 30px; height:25px; padding:5px;
padding:0;
margin:0;
display:none;display: none;
}
#menu li
{ position:relative;
display: table-cell;
width:auto;
display:block;
font-weight:bold;
background-color:Olive;
list-style-type: none;
text-align:center;
float:left;
line-height:30px;
list-style-type: none;
display: block;
float: left;
}
ul#menu ul.sub-menu li
{
float:left;
line-height:30px;
text-indent:0;
margin:auto;
position:absolute;
list-style-type:none;
clear:both;
margin: 0;
background-color: #666;
border:none;
display: table-cell;
width:auto;
display:block;
float: none;
}
ul#menu li:hover ul.sub-menu
{
visibility:visible; clear:both; /*display:inline;*/ position: absolute; display:table-cell;
}
ul#menu li a
{
display:block;text-indent:0; text-decoration: none; padding:5px 25px 5px 10px;
}
ul#menu li ul.sub-menu li a
{
text-decoration: none;
padding: 5px 10px 5px 10px;
display:inline-block;
}
ul#menu li a:hover ul.sub-menu
{
visibility :visible;
text-indent:0;
font-size:20px;
height:100%;
width:100%;
background-color:red;
text-decoration: none;
display:block;
}
submenu will not display exactly under parent menu
I am very new to CSS and it's all control..guide me plz
You need to set left and top property
ul#menu li ul.sub-menu {
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 100%;
left: 0%;
height:25px;
padding:5px;
padding:0;
margin:0;
display:none;
}
I would like to convert my drop down menu to a drop up menu. I have searched information on the internet, but it didn't help.
My css code:
#nav
{
margin: 0px;
padding: 0px;
position: absolute;
top: 18px;
display: block;
left: 313px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li:hover ul
{
display:block;
}
#nav > li:hover
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul
{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li
{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a
{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a
{
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span
{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
The solution lies in making child ul absolutely positioned.
Here is a working example : http://jsfiddle.net/3NmRP/
The "margin-top" on "#nav" is just here for the sake of example, you can remove it.
#nav{
margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px;
}
#nav > li {
list-style-type:none;
float:left; display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li ul {
position:absolute;
bottom: 100%;
}
#nav li:hover > ul {
display:block;
}
#nav > li:hover{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a {
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
#nav {
margin-top: 100px;
}
I am trying to make my menu links #666666 and then on hover make it #FFFFFF
i want these colours to change on the text colour and the top border
http://jsfiddle.net/4Xdkn/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#FFFFFF;
}
Selectors should be
#menu li a {
color: #666;
display: block;
}
#menu li:hover {
border-top-color: #FFF;
}
#menu li:hover a {
color:#FFFFFF;
}
#menu has no direct li descendants so #menu > li:hover does not match anything.
http://jsfiddle.net/4Xdkn/8/
You have an error in your CSS
#menu > li does not target anything, since #menu is applied to a div and it has no direct children of type li.
Use these rules
#menu li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu li:hover,
#menu li:hover a {
color:#FFFFFF;
}
#menu li a {
color:#666666;
}
#menu li:hover {
border-color:#FFFFFF;
}
Demo at http://jsfiddle.net/gaby/4Xdkn/4/
Updated Fiddle
You need to add:
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #666666;
}
#menu
li a:hover {
border-color:red;
color:#fff
}
On #menu > ul > li remove the border-top and padding, because this has been added to the a tag now.
On #menu > li remove the margin-top property
try this
http://jsfiddle.net/4Xdkn/7/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
color:#ffffff;
min-width:120px;
}
#menu > li > a {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
text-decoration:none;
color:#ffffff;
text-decoration:none;
}
#menu li:hover {
color:#FFFFFF !important;
text-decoration:none;
border-top:4px solid #ffffff;
display:inline-block;
}
#menu li a:hover{
color:#ffffff;
text-decoration:none;
}
}
Colorize the a-element instead of the li and make the a element as big as the li.
#menu li a:hover {
color:white;
border-style:solid;
border-width: 1px 0px 0px 0px;
border-color:white;
}
Try the below css
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:120px;
}
#menu > li {
list-style:none;
padding:25px 0 0 0;
margin-left:auto;
margin-right:auto;
border-top:1px solid #fff;
}
#menu ul li a:hover {
color:#FFFFFF;
}
#menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;}
#menu li a:hover { border-top:4px solid #fff; color:#fff}
if you open the following link
http://dev.scopedesign.com/client/nyfarmersmarket_02/
you find an navigation bar if you go on "ABOUT US" you will see a drop down..
then you se the problem in drop down
now i want to give you a little idea from how i make this..
I am working on joomla CMS, & i do some changes in navigation module to get my style now the follwing CSS i used for this.. the problem is it is displaying the .parent.active a
background in drop downs i dont want that for this purpose i made .parent.active a ul
but it doesnt work..
you can check this how it works by inspect element in the browser.
.parent.active a{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.parent.active a ul{
background-image:none !important;
background-repeat:none;
padding-top:0px !important;
padding-bottom:0px !important;!
}
.menusan
{
/* Use these parameters to positions your menu. */
position: absolute;
// left: 10px;
}
.menusan, .menusan li, .menusan li ul { /* all lists */
padding: 0;
margin: 0;
// list-style: none;
display:block;
float:left;
}
.menusan li a{
padding-left:20px;
padding-right:18px;
}
.menusan li a:hover{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.menusan li{ /* all list items */
padding-top:11px;
padding-bottom:11px;
// padding-left:20px;
// padding-right:18px;
-moz-border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;
[border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;/
border-right:#7cb43f groove 2px;]
}
.menusan li ul { /* second-level lists */
//top:35px;
margin-top:13px;
float:left;
position: absolute;
border: none;
left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
}
.menusan li ul li{
display:list-item;
float:none;
border: none;
background-color:#537d28;
color:#fff;
//padding:10px 10px 24px 10px;
}
.menusan li ul li:hover{
display:list-item;
float:none;
background-color:#96c73d;
}
.menusan li ul li a{
display:block;
float:left;
}
.menusan li ul li a:hover{
display:block;
float:left;
background-color:#96c73d;
}
.menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menu */
border: none;
display:block;
float:left;
}
/* **************** Dropdown Menu styling end here ***************/
One thing i specialy want to let you know guys that it is difficult to make div in it or cheange style name because it is a dynamic module.
Cleaned up and fixed your CSS, try this:
.navigation {
background-color:#537D28;
color:#fff;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:40px;
margin-bottom:0.6em;
width:100%;
}
.menusan {
margin: 0;
list-style-type: none;
font-weight:700;
float: left;
color:#fff;
}
.menusan > li {
margin:0;
float: left;
border-right:1px groove #7cb43f;
position:relative;
}
.menusan li a {
display:block;
height:40px;
line-height:40px;
padding:0 25px;
text-decoration:none;
color:#fff;
}
.menusan .active {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li a:hover {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li.parent ul {
position:absolute;
z-index:9999;
top:40px;
left:0;
display:none;
background-color:#537D28;
}
.menusan li.parent:hover ul {
display:block;
}
.menusan li.parent ul a {
float:left;
}
.menusan li.parent ul a:hover {
background-color:#70A835;
}
.menusan li.parent ul a {
width:55px;
}