See-Through Menus?

[Skhilled]

I'm not sure what the heck I did but my menus seem to show "behind" menus lower than they are such as the main menu dropdown over the Admin menu. See the images...

You cannot view this attachment. You cannot view this attachment.

It's one of the weirdest things. LOL

[Bigguy]

You have to change or add a z-index in there to one of the menu's

[Skhilled]

Ah! I never knew what a z-index was. LMAO Thanks!

[Bigguy]

Hey, no problem at all. Glad I could help.

[Skhilled]

That was a bust...unless I was doing something wrong...again! LMAO

[Bigguy]

No, that should work. I have had that happen as well and that's how I fix it. By adding to editing the existing z-index code. The numbers for the z-index can go up to 100 or so as far as I know.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

[Skhilled]

Ah! Now I know how it works and you've been holding out on me! It only works with the position or flex elements. And I thought you were my friend! LMAO

[Bigguy]

Lol, I was trying to be, lol. I've done a lot of editing in the past but haven't played with the menus in awhile.

[Skhilled]

I'm a bit busy cooking today but I'll check it out tomorrow.

[Bigguy]

It only works with the position or flex elements.

I was just thinking....you can change and separate things in SMF. I've had to do it a few times to get things right. I may not be explaining it right but I know what I'm sayin in my head, lol. Just thought I would put this out there.

[Skhilled]

Yeah, I know. When a new version of SMF is released I create a modified version of the default with certain elements/styles separated to make things easier for updating the themes. I haven't don't it for 2.1.x yet cause I was anxious to get the theme done. Then I just use that to start with.

[Skhilled]

Yeahhhhh, fixed! I got smart and used a clean default index.css to compare it to the one in the theme. Something was commented out that should not have been.

Code Select Expand

#main_menu .popup_container, #genericmenu > .popup_container {
 
/* display: block;
position: relative; */
background: none;
margin: 0;
height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */
}

[Skhilled]

Ok, so it is not all of the way fixed. LOL The main menu is fixed but the admin menu still does it.   Crap! I may have to start over just to make sure it is all fixed.

[Bigguy]

At least ya figured it out.

[Skhilled]

Only part of it. I've compared it over and over and still don't see what's wrong!

[Bigguy]

Is the admin menus in a different css file

[Skhilled]

I've checked admin.css and there's no problem there.

[Bigguy]

I'll have to download a fresh copy of SMF and take a look in a bit.

[Bigguy]

How's this goin for ya

[Skhilled]

I was waiting for you to take a look...remember? LOL But I'll just go over to smf and ask over there.

[Bigguy]

Well, ask over there and I will download it today. I have been really busy with my business lately. Everyone seems to want windows washed this year. Sorry for not being around a whole lot.

[Skhilled]

The problem seems to be with the main admin menus hiding behind the adm_submenus.

[Bigguy]

Out of curiosity....is there anything in the index.css file about admin menus. Around line 921 possibly. Just using the inspector in FF so the line # might be off.

[Bigguy]

Does this help at all for css for menus: (Line 894, index.css)

Code Select Expand

/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {
    z-index: 90;
    position: absolute;
    display: none;
    min-width: 18.2em;
    padding: 0.5em;
    font-weight: normal;
    border: solid 1px #999;
    border-left: solid 1px #bbb;
    border-top: solid 1px #ccc;
    border-radius: 4px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
    background: #fff;
}
/* Level 2 link background. */
.dropmenu li li {
    margin: 0;
    padding: 0;
    width: 17em;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid transparent;
}
/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenu li:hover li a, .dropmenu li li a {
    background: none;
    padding: 0 9px;
    color: #346;
    border: none;
    line-height: 2.2em;
}

.dropmenu li li a > img {
    vertical-align: middle;
}

[Skhilled]

Out of curiosity....is there anything in the index.css file about admin menus. Around line 921 possibly. Just using the inspector in FF so the line # might be off.

There is a "#main_menu", "#genericmenu", and a "#adm_submenus" in a few locations.

EDIT: That code didn't help.

[Skhilled]

Ok, I've redone the theme from scratch cause I figured it would be faster to get it done than waiting for a fix. LMAO I think it's ready for release.

https://docskillz.com/skins

[Bigguy]

The second category there were the "testing, testing testing" is should maybe have a bit more space between itself and the title of the cat but other than that it looks real good.

[Skhilled]

Actually, it looked worse than that. I think it's a smf issue but not sure. It's one of the things I noticed when I first installed 2.1.2. There's a couple of other things that are slightly off but I fixed them so they lined up better.

EDIT: The other thing I forgot to mention is that the toggle up/down also does not line up correctly with the text and is quite hard to adjust it.

[Skhilled]

How does it look now?

[Bigguy]

It's this bit here, I think it's to close together. Just my opinion though.

You cannot view this attachment.

[Skhilled]

That's how smf designed it. How does it look now?

[Bigguy]

How does it look now?

Alot better. Looks good.

[Skhilled]

Thanks!