My dropdowns aren't aligned the right way, and won't go away.

Started by numbro, July 09, 2013, 03:05:37 PM

Previous topic - Next topic

ARG01

There has to be something else wrong. I replaced the entire menu css with the original. It fixes the dropdown issue but  the main menu is still gone. This index.css is all kinds of messed up.

numbro, you may be better off starting from scratch and, saving your original files as you go.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Mick.


ARG01

Going by the menus in his pics I am thinking default. But with the css that he supplied, there is no main nav at all. Only the navs in admin, profile, etc.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.


ARG01

If using a custom theme, why is the default menu showing?
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

numbro

Quote from: ARG on July 09, 2013, 04:41:07 PM
If using a custom theme, why is the default menu showing?
Just log in. I created an account for you.

Username: ARG
Password: guest

The theme is titled "epic"

ARG01

This one fixes your dropdown issue but your main nav menu is a mess. Not sure what you did there.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

numbro

Quote from: ARG on July 09, 2013, 04:48:15 PM
This one fixes your dropdown issue but your main nav menu is a mess. Not sure what you did there.
I actually just figured this one out. I had removed a {display: none;} that the menu needed. And are you sure? :(

ARG01

This one (see attachment) fixes the main nav menu and the wrapper.

Btw, the min/max wrapper width should be altered in the css "wrapper" settings, not the "body".

Also, borders really don't belong in the toolbar unless you know what you are doing.

The main nave dropdown also has issues but I have to run so it's up to you to work on that. Also, borders really don't belong in the toolbar unless you know what you are doing. You can work on that as well.  ;)

Here's a hint: The problem is in this area.

#nav {
padding: 3px 0;
margin-left: 0;
margin-top: -10px;
margin-bottom: 7px;
list-style-type: none;
text-align: left;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
display: inline-block;
margin: 0;
}
#nav li a {
display: block;
line-height: 32px;
padding: 0 12px;
color: #cecece;
font-size: 12px;
}
#nav li a.active {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height:28px;
}
#nav li a.active span {
background: url(../images/id/nav_active.png) 100% 50% no-repeat;
}
#nav li a:hover, #nav li:hover a, #nav li.sfhover a {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height: 28px;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #ccc;
background: #E4620E;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #fff;
background: #E4620E;
}
#nav li li {
width: 200px;
height: auto;
padding: 0;
}
#nav li li a, #nav li li a:hover, #nav li li a, #nav a.active li a, #nav li:hover li a, #nav li.sfhover li a {
background: none;
height: 30px;
line-height: 30px;
margin: 0;
font-weight: normal;
text-transform: none;
font-size: 12px;
color: #FFF;
}
#nav li ul {
background: #202020;
position: absolute;
width: 200px;
left: -999em;
margin-left: -1px;
}
#nav li ul ul {
margin: -27px 0 0 195px;
}
#nav ul li li:hover, #nav ul li li.hover {
position: static;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: 3px;
}
#nav li li:hover ul, #nav li li li:hover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}


What a mess!  ;D
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

numbro

Quote from: ARG on July 09, 2013, 05:05:00 PM
This one (see attachment) fixes the main nav menu and the wrapper.

Btw, the min/max wrapper width should be altered in the css "wrapper" settings, not the "body".

The main nave dropdown also has issues but I have to run so it's up to you to work on that.

Here's a hint: The problem is in this area.

#nav {
padding: 3px 0;
margin-left: 0;
margin-top: -10px;
margin-bottom: 7px;
list-style-type: none;
text-align: left;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
display: inline-block;
margin: 0;
}
#nav li a {
display: block;
line-height: 32px;
padding: 0 12px;
color: #cecece;
font-size: 12px;
}
#nav li a.active {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height:28px;
}
#nav li a.active span {
background: url(../images/id/nav_active.png) 100% 50% no-repeat;
}
#nav li a:hover, #nav li:hover a, #nav li.sfhover a {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height: 28px;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #ccc;
background: #E4620E;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #fff;
background: #E4620E;
}
#nav li li {
width: 200px;
height: auto;
padding: 0;
}
#nav li li a, #nav li li a:hover, #nav li li a, #nav a.active li a, #nav li:hover li a, #nav li.sfhover li a {
background: none;
height: 30px;
line-height: 30px;
margin: 0;
font-weight: normal;
text-transform: none;
font-size: 12px;
color: #FFF;
}
#nav li ul {
background: #202020;
position: absolute;
width: 200px;
left: -999em;
margin-left: -1px;
}
#nav li ul ul {
margin: -27px 0 0 195px;
}
#nav ul li li:hover, #nav ul li li.hover {
position: static;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: 3px;
}
#nav li li:hover ul, #nav li li li:hover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}


What a mess!  ;D
Thanks man! Fixed it. ;)


ARG01

I am not sure if you caught this in my edit even though I mentioned it twice, purposely.

QuoteAlso, borders really don't belong in the toolbar unless you know what you are doing.
;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Advertisement: