Welcome! To use this support forum, please Login or Join Today!

   

Appearance of submenu

{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

Hi Casey,

I’m having trouble with the appearance of submenus.  This is using Style10.css.

1. When hovering over a main menu item which has a submenu, the submenu is one width (say 150px).  But there is a line extending out to the right, well past the right hand edge of the padded li.

2. When hovering over the submenu item, that particular li changes to a wider width (I think 200.)  That really looks strange.

See attached image for example.  Or you can see it in action at http://77.104.139.216/~beesacro/

Is this working as designed? I don’t think I’ve changed anything in style10.css in the child theme except colors.

Thanks for your help.

PS As you can see I am going to need to move the submenus down a bit to accommodate the multi-line menu items.  Any suggestions on the best way to do this would also be appreciated.

Attachments:

https://www.filepicker.io/api/file/MhgEqsYRjadhio49tXMG

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

It looks like your customizations in mobius-child/style.css are overriding the submenu.

Try this instead:

/*  Cause menu to word-wrap  */

.menu-header li {
    max-width: 150px;
    vertical-align: middle;
    text-align: center;
}
.menu-header a {
    height: 40px;
    line-height: 22px !important;
    white-space: normal;
}

/* repositon submenu for edge case? */

.menu-header li#menu-item-81 .sub-menu {
 top: 80px;
}

/* restore submenu styles */

.menu-header .sub-menu li {
 text-align: left;
    max-width: 220px;
}
.menu-header .sub-menu a {
    height: 24px;
    max-width: 220px;
    line-height: inherit;
}
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If it’s just that one menu item that needs specific styling, you could slim down the above with just:

/*  Cause menu to word-wrap  */

.menu-header li#menu-item-81 a {
    max-width: 150px;
    white-space: normal;
    text-align: center;
    line-height:110%;
}

.menu-header li#menu-item-81 .sub-menu { top: 80px; }

.menu-header li#menu-item-81 .sub-menu li {
 max-width: inherit;
}
.menu-header li#menu-item-81 .sub-menu li a {
 max-width: inherit;
 line-height: inherit;
 text-align: left;
 white-space: inherit;
}
{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

Thanks Casey, that (first solution) fixed the flyout menus.  Unfortunately it broke my method of forcing the main menu items to wrap.  Any further thought on the best way to accomplish the wrap?  I think I’m going to need at least 5 menu items at the main level, so am going to need that wrap unless I can figure out some other title for that item.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Yes, it looks like you used #menu-header instead of .menu-header in some rules.

{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

That was it, thank you!