Puddleglum

Certainly. https://bcschoolsmh.org/

I’ve made changes in the child theme, yes, but not, I think recently (it is of course difficult to be certain because I redid the header. I’m coming up with nothing looking through the CSS and markup so I’m exploring the upgrade as a possibility.

Here’s my header markup.

<div id="page" class="hfeed site">
	<?php do_action( 'before' ); ?>
	<div id="masthead-wrap" class="mastheadGradient">
        <header id="masthead" class="site-header" role="banner">
            <div id="headerWrapper" style="width:100%; overflow:hidden;">
                <div id="headerLogoWrapper" style="float:left;">
                    <?php
                    $header_image = get_header_image();
                    if ( ! empty( $header_image ) ) { ?>
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                            <img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
                        </a>
                    <?php } ?>
                    <?php superhero_the_site_logo(); ?>
                </div>
                <div id="headerTitleWrapper" style="float:left;margin-top:2em;">
                    <h1 style="clear:none;" class="site-title">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                    <h2 style="clear:none; font-size:120%;" class="site-description"><?php bloginfo( 'description' ); ?></h2>
                </div>
            </div><!-- #headerWrapper -->
            <nav role="navigation" class="site-navigation main-navigation">
                <h1 class="assistive-text"><?php _e( 'Menu', 'superhero' ); ?></h1>
                <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'superhero' ); ?>"><?php _e( 'Skip to content', 'superhero' ); ?></a></div>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- .site-navigation .main-navigation -->
            <div class="clearfix"></div>
        </header><!-- #masthead .site-header -->
	</div><!-- #masthead-wrap -->

Rendered and served to Chrome

<div id="masthead-wrap" class="mastheadGradient">
        <header id="masthead" class="site-header" role="banner">
            <div id="headerWrapper" style="width:100%; overflow:hidden;">
                <div id="headerLogoWrapper" style="float:left;">
                                            <a href="https://bcschoolsmh.org/" title="Boone County Schools Mental Health Coalition" rel="home">
                            <img src="https://bcschoolsmh.org/wp-content/uploads/2015/06/20150630-BCSMHLogo-Header150h.png" class="header-image" width="291" height="150" alt="" />
                        </a>
                                                        </div>
                <div id="headerTitleWrapper" style="float:left;margin-top:2em;">
                    <h1 style="clear:none;" class="site-title">
                        <a href="https://bcschoolsmh.org/" title="Boone County Schools Mental Health Coalition" rel="home">Boone County Schools Mental Health Coalition</a></h1>
                    <h2 style="clear:none; font-size:120%;" class="site-description">~ Cultivating Social and Emotional Health ~</h2>
                </div>
            </div><!-- #headerWrapper -->
            <nav role="navigation" class="site-navigation main-navigation">
                <h1 class="assistive-text">Menu</h1>
                <div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>
                <div class="menu-visitormenu-container"><ul id="menu-visitormenu" class="menu"><li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-97"><a href="https://bcschoolsmh.org/">Home</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116"><a href="#">About Us</a>
<ul class="sub-menu">
	<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="https://bcschoolsmh.org/about-bcsmhc/who-we-are/">Who We Are</a></li>
	<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="https://bcschoolsmh.org/about-bcsmhc/need-for-services/">Need for Services</a></li>
	<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="https://bcschoolsmh.org/about-bcsmhc/mission-statement/">Mission Statement</a></li>
	<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="https://bcschoolsmh.org/about-bcsmhc/history/">History</a></li>
	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="https://bcschoolsmh.org/about-bcsmhc/our-approach/">Our Approach</a></li>
	<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="https://bcschoolsmh.org/about-bcsmhc/staff/">Staff</a></li>
</ul>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="https://bcschoolsmh.org/for-educators/">For Schools</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="https://bcschoolsmh.org/for-parents/">For Parents</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://bcschoolsmh.org/mental-health-in-the-news/">In the News</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="https://bcschoolsmh.org/contact-us/">Contact Us</a></li>
</ul></div>            </nav><!-- .site-navigation .main-navigation -->
            <div class="clearfix"></div>
        </header><!-- #masthead .site-header -->
	</div><!-- #masthead-wrap -->

Relevant style.css content from child

.mastheadGradient
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+26,f1da36+100 */
	background: #fefcea; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #fefcea 26%, #f1da36 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(26%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* IE10+ */
	background: linear-gradient(135deg,  #fefcea 26%,#f1da36 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#masthead-wrap {
	-webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
	box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
}
.logged-in #masthead-wrap {
	top: 0 !important;
}
.wp-admin .logged-in #masthead-wrap {
	top: 0 !important;
}
#masthead {
	color: #fff;
	margin: 25px auto 5px auto;
	width: 960px;
	min-height: 50px;
	overflow: hidden;
	background:url(/Media/img/BCSMHC-SiteHeaderBackground-WovenLines.png) bottom left no-repeat;
}
#masthead hgroup {
	float: left;
	clear: none;
	width: 291px;
}
.header-image,
.site-logo {
	width: auto;
	max-height: 150px;
	margin: 1em 2em .25em 3em;
}
.site-title {
	/*color: #fff;*/
	color: #21409A;
	font-size: 1.7em;
	font-weight: 400;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
	font-family: "Josefin Sans";
}
.site-title a {
	/*color: #fff;*/
	color: #21409A;
	text-decoration: none;
	font-family: "Josefin Sans";
}
.site-title a:hover {
	color: #21409A;
}
.site-description {
	color: #818181;
	font-size: .9em;
}

.main-navigation {
	float:right;
	display: block;
	width: 70%;
	padding-bottom:2.25px;
}
.main-navigation a:visited {
	color: #ffffff;
}

.main-navigation ul {
	list-style: none outside none;
	margin: 0;
	padding-right: 0px;
	text-align: right;
}
.main-navigation li {
	background-color: #4c86af;
	color: #fff;
}
.main-navigation a {
	padding: 5px 10px 5px 10px;
	color: #ffffff;
	font-size: 0.9em;
}
.main-navigation ul ul {
	background-color: #141414;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
		top: 1.5em;
		left: 0;
		z-index: 99999;
	text-align: left;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	width: 175px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
	background-color: #0b507e;
	color: #fff;
}
.main-navigation ul ul :hover > a {}
.main-navigation ul ul a:hover {}
.main-navigation ul li:hover > ul {
	display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/******* Small menu ********/
.menu-toggle {
	cursor: pointer;
}
.main-small-navigation .menu {
	display: none;
}

Same content from superhero style… in case I altered

#masthead-wrap {
	background-color: #262626;
	-webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
	box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
	position: fixed;
		top: 0;
		z-index: 1000;
	width: 100%;
}
.logged-in #masthead-wrap {
	top: 32px;
}
.wp-admin .logged-in #masthead-wrap {
	top: 0;
}
#masthead {
	color: #fff;
	margin: 25px auto;
	width: 960px;
	min-height: 50px;
}
#masthead hgroup {
	float: left;
	width: 50%;
}
.header-image,
.site-logo {
	width: auto;
	max-height: 150px;
}
.site-title {
	color: #fff;
	font-size: 1.9em;
	font-weight: 400;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
}
.site-title a {
	color: #fff;
	text-decoration: none;
}
.site-title a:hover {
	color: #ea5449;
}
.site-description {
	color: #818181;
	font-size: .9em;
}

#main {
	font-size: .8em;
	line-height: 24px;
	margin: 25px auto;
	width: 960px;
}
#primary {
	float: left;
	margin-right: 25px;
	width: 695px;
}
#primary.full-width-page {
	float: none;
	margin-right: 0;
	width: 100%;
}
#secondary {
	float: right;
	width: 240px;
}
#colophon-wrap {
	background-color: #262626;
	clear: both;
	margin-top: 25px;
	padding: 25px 0;
	width: 100%;
}

#colophon {
	color: #818181;
	font-size: .8em;
	margin: 0 auto;
	width: 960px;
}
#colophon a:hover {
	color: #fff;
}

/* =Menu
----------------------------------------------- */

.main-navigation {
	display: block;
	float: right;
	width: 50%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	text-align: right;
}
.main-navigation li {
	display: inline-block;
	position: relative;
}
.main-navigation a {
	color: #818181;
	display: block;
	font-size: .8em;
	padding: 3px 20px;
	text-decoration: none;
}
.main-navigation ul ul {
	background-color: #141414;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
		top: 1.5em;
		left: 0;
		z-index: 99999;
	text-align: left;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	width: 175px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
	background-color: #ea5449;
	color: #fff;
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
	cursor: pointer;
}
.main-small-navigation .menu {
	display: none;
}

.site-content .site-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}
.site-content .nav-previous {
	float: left;
	width: 50%;
}
.site-content .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

I posted a follow-up when I changed the topic to resolved, but apparently they are different submission processes.

The developer contacted me via email within an hour and explained to me that what happened was not how the plugin was designed to work (a bug). He sent me a working pro-version and is checking into the issue I had.

We ended up subscribing for another year because it’s a fantastic plugin. My heat was because it appeared to have done what I consider unacceptable… i.e., the silent down-grade. It had, but not by intent and the developer is making sure it doesn’t happen to others.

Good service. Thanks!

Actually, I sent a note to support about a year ago and never got a response. It would be a very nice modification to the plugin if a separator could be added as an option if a user wishes to show that the newslist (mine is chronological) has looped. Right now I’ve been using an empty post so that there is one empty element between first and last when it loops. Would be nice if it were just a thick black bar or similar rather than the height of a whole entry.

My issues with the certificate are solved. I marked the thread as ‘resolved’ hoping that you and Gert are able to get him/her squared away despite.

Thank you for resolving. I’m a bit concerned seeing the notification that support has expired… the support expiring is fine but it said that I will no longer receive updates to the plugin? Wha??? That’s not acceptable. I’m not going to halt the WordPress upgrade path to accommodate a plugin that hasn’t been altered to work with newer versions of WP. I’ve never heard of such a thing (well except for Microsoft EOLing Windows XP of course).

Need a response. I’ve emailed as well.

I’ve paid for a working plugin. Please respond. Thank you.

Bump

Bump

A followup. This will succeed in hiding the buttons, but even having added it to wp-ui/css/themes/wpui-all.css and in an inline <style> declaration just preceding the shortcode usage, it still renders the buttons before hiding them.

Thank you. I was having very little luck searching through all the packed css documents. I keep forgetting that the ‘inspector’ can help with this.

I’ll have to assume it works as, like I said, the buttons would only intermittently render. So far they’ve not intermittently appeared, so I have some confidence in the solution beyond the fact that it makes good sense.

Thank you!

If I haven’t made any mistakes when redacting this code I use in one of my page templates (php file), this method works for me to nest two menus, a vertical tab menu inside of a vertical accordion.

The method is to do_shortcode(”); once to create the subtab menu, but instead of echoing it out, assigning it to a variable, and then doing a second do_shortcode(‘code’.$var.’code’); to include the previous output and then echoing to the browser.

<?php
    $subtabs = do_shortcode('
        [wptabs mode="vertical"]
            [wptabtitle load="https://my.url/SubTab1.php"]Sub Tab #1[/wptabtitle]
            [wptabtitle load="https://my.url/SubTab2.php"]Sub Tab #2[/wptabtitle]
            [wptabtitle load="https://my.url/SubTab3.php"]Sub Tab #3[/wptabtitle]
        [/wptabs]'
    );

    echo do_shortcode('
        [wptabs type="accordion"]
            [wptabtitle load="https://my.url/Tab1.php"]Normal AJAX loaded tab[/wptabtitle]
            [wptabtitle]Subtabs[/wptabtitle][wptabcontent]'.$subtabs.'[/wptabcontent]
        [/wptabs]
    ');
?>

Dunno if this site ‘bumps’ but in case it does, I was hoping for a response ??

Hey thanks. I know what you mean when you and I expect different behavior because in recent years there have been a lot of attempts at innovation in interface design, even in operating systems.

I’ve only ever seen websites (which are non-standardized of course, so everyone can use whatever logic they wish). But I think it is true of all mouse-navigation (and in Win, keyboard-navigation) operating systems, that there are no occurrences (Win & Mac… I’m too far removed from *nix GUIs) of pull-down menus that open when hovered… as the OS designers try to enforce unified behavior they work closely with enterprise SDKs to either delegate behavior to system logic, or to provide an API that emulates the system logic.

I kind of think it comes down to what combination of 1-4 you use. I too am annoyed when menus close on mouse-out when I ‘miss’ my target ?? I think the combinations I’ve seen in the past that are ‘kosher’ are.

a) If you click to open, then it’s ok to only maintain the menu while the cursor remains in the hit-area of the pull-down/context menu, and close when it leaves or an item is chosen. This can be annoying, especially in multi-level menus where you can get 3 levels in, miss, and have to start over from level 1, so they started using b) as a variation.

b) If you click to open, then it’s ok to maintain the menu until any indicators are given that it’s no longer wanted… a selection is made, a click is made elsewhere… in a multi-window environment, if the item containing the menu loses focus.

but c)… even a slow-cursor-drag on the way to something else will open the menu and nothing will get rid of it short of -clicking- the menu button… which is so non-intuitive, it took me, a software engineer/interface designer, a while to figure out how to close the thing… bad mojo… and you’ve started a process to get that fixed. Cool.

I would still, for future consideration, suggest that using hover to open a menu is a bad idea. We all know how extremely annoying it is to be using MS Office and to paste something and have a context menu open with paste options that obscures text and won’t go away w/o wasted key/mouse antics… or typing in Facebook and because your cursor was left hovering over the TextArea you’re typing into, a little ToolTip pops up that says “Type a message.” or somesuch and won’t go away, even when you click around, and you cannot continue editing because it obscures the context you need to see to continue to author. It’s a fact of the mechanics of using a mouse that when you stop the mouse moving, or move it so the cursor doesn’t obscure what you’re looking at, that it has to stop somewhere… there’s no little non-reactive mouse-house where the cursor goes until needed again… and if it happens to be left over something reactive, then you’ve got a user-annoyance on your hands ??

One thing I’ve seen some wordpress menus and even the Apple iOS API do (and in the case of Apple, do POORLY) is increase the hit area around the visual element just a bit, to give some wiggle-room for imprecision mousing or touchTapping.

Ah well. No interface will ever be ‘perfect’ to all people.

Thanks for sending that along. Loving Jetpack.

As I am looking for the same answer, a quick search for Joyful Thrifty Home turns up https://joyfulthriftyhome.com/ with the same headshot ??

My site is https://marshwiggle.org