News:

SMF 2.0.19 has been released! Please update. Read more.

Main Menu

2.0 css glitch

Started by Sir Osis of Liver, June 27, 2022, 01:29:59 PM

Previous topic - Next topic

Sir Osis of Liver

Just noticed this, apparently it's been in the theme for a while.  Dropmenus display behind cat bars only on some pages, others are fine.  All use same css for dropmenus and cat bars, all cat bars are in <h3 class="catbg">...</h3>, inspect is no help.  Can't find what's causing it.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.   
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

Ok, problem seems to be here:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
opacity: 0.7;
}


If I remove opacity: 0.7; dropmenu displays on top of catbg on all pages.  If I replace it with this:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
background: rgba(238,238,238,0.7);
}


  same problem.  No idea why it only happens on some pages, not others.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

Interestingly (or not, apparently :P ), does the same thing in Curve.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

TwitchisMental

Quote from: Sir Osis of Liver on June 27, 2022, 02:03:26 PMOk, problem seems to be here:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
opacity: 0.7;
}


If I remove opacity: 0.7; dropmenu displays on top of catbg on all pages.  If I replace it with this:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
background: rgba(238,238,238,0.7);
}


  same problem.  No idea why it only happens on some pages, not others.

If I am understanding you correctly, the solution would be to put opacity: 1; at the bottom and that will solve the issue.

For curiosity sake I made a local smf 2.0 install, but I am not getting this issue on the default curve theme. This may mean that your default theme has the opacity set in its css.

Dhayzon

z-index, and positions  it's the key

Sir Osis of Liver

Tried several variations of z-index, they're ignored.

Squeaky clean install, new database -

You cannot view this attachment.


 .dropmenu
{
padding: 0 0.5em;
opacity: 0.7;
}

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

Ok, an obvious question: why do you want to use opacity there anyway?

Sir Osis of Liver

Because it looks nice.  It's a custom transparent theme.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

The .dropmenu class is the ul that holds everything else. It's not actually visible. The visible bits are the anchors (.dropmenu > li > a) and the child ul's (.dropmenu ul). Try putting the opacity on those instead.

Sir Osis of Liver

Hmm, well this works in core Curve -


.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
opacity: 0.7;
}


But if I add this to theme css -


.dropmenu li ul {
opacity: 0.7;
}


 it doesn't display opacity.  Not a big deal, only admins will see main menu so it's not important, just annoying.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

In that case the declaration in your theme's CSS is being overridden by something else, which should be visible in the document inspector.

Sir Osis of Liver

Inspector is not showing me anything wrong (or I'm not seeing it).  Opacity is active in dropmenu, and is working.  There's nothing in catbg that should cause menu to drop behind it.  You can try it in Curve, does same thing.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

Ant, where is your code for placing boards in columns on board index?
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

/* ------------------ */
/* SMF site-specific. */
#board_12_children > p {
position: relative;
padding-top: 2em;
column-count: 5;
}
#board_12_children > p > strong {
position: absolute;
top: 0;
}
#board_12_children > p > span {
display: block;
overflow: hidden;
padding: 2px 8px 2px 0;
white-space: nowrap;
text-overflow: ellipsis;
}
#board_12_children > p > span:nth-child(4) {
display: none;
}
#board_12_children span::after {
content: '';
}
/* ------------------------------ */
@media screen and (max-width: 1024px) {
#board_12_children > p {
column-count: 3;
}
}
/* ------------------------------ */
@media screen and (max-width: 720px) {
#board_12_children > p {
column-count: 2;
}
}

Obviously you can use that for all child boards, by removing the board ID and substituting the .children class, or you can tweak it for specific boards by using whatever ID's you like.

Sir Osis of Liver

#14
Don't need it for child boards.  I've done a workaround with TCB mod but it screws up linktree.  Would like to make all children parent boards and display them in columns.  Thought you had posted code for that.


I hacked the linktree.

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Advertisement: