Plugins wraps menu with mysticky-wrap, but doesn’t add .wrapfixed class

  • Hi,

    I’m using mystickymenu plugin on many sites and the plugin works great everywhere besides my current project – https://zacheusz.katowice.pl/.

    The plugins easily finds #masthead element and wraps it with #mysticky-wrap and #mysticky-nav, but it doesn’t add recquired .wrapfixed class on scroll :/

    Printed DOM structure:

    <div id="mysticky-wrap">
	<div id="mysticky-nav">
		<header class="site-header" id="masthead" role="banner">
			<div class="odliczanie row">
				<div class="container">
					<!-- top section -->
				</div>
			</div>
			<div class="header-bottom">
				<div class="container">
					<!-- #site-navigation -->
				</div>
			</div>
		</header>
	</div>
</div>

    Current plugin’s settings:

    mystickymenu plugin's settings

    I really like the plugin and the quality of it’s code, so I wouldn’t like to use another plugin.
    Do you have any ideas how can I fix that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • damiroquai

    (@damiroquai)

    I cant see menu on that page, is there some test site? I need to see it to try to fix it ??

    Thread Starter piotrscigala

    (@piotrscigala)

    Thank you for your willingness to help,

    The website mentioned previously is currently there: https://zacheusz.katowice.pl/dev/

    Current plugin settings: (Class is set to .header-bottom)
    Current plugin's settings

    Once again, plugins wraps targeted element succesfully, but doesn’t work (without generating any JS error). DOM Structure:

    
<style type="text/css">#wpadminbar { position: absolute !important; top: 0px !important;}.myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; }
	#mysticky-nav { width:100%!important;  position: static;top: -100px;}.wrapfixed { position: fixed!important; top:0px!important; left: 0px!important; margin-top:0px!important;  z-index: 999; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; filter: alpha(opacity=97); opacity:.97; background-color: #ffffff!important;  }
</style>

[...]

<header id="masthead" class="site-header" role="banner">
	<div class="countdown">
		<!-- counter -->
	</div>
	<div id="mysticky-wrap">
		<div id="mysticky-nav">
			<div class="header-bottom">
				<div class="container">				
					<div class="site-branding">
						<!-- Logo -->
					</div><!-- .site-branding -->	
					<nav id="site-navigation" class="main-navigation" role="navigation">
						<div class="menu-menu-glowne-container">
							<ul id="primary-menu" class="menu">
								<!-- Site navigation -->
							</ul>
						</div>
					</nav><!-- #site-navigation --> 
					<div id="mobile-header">
						<a id="responsive-menu-button" href="#sidr-main">Menu <i class="fa fa-bars" aria-hidden="true"></i></a>
					</div>	   
				</div>			
			</div>
		</div>
	</div>
</header>

[...]

<script type='text/javascript'>
/* <![CDATA[ */
var mysticky_name = {"mysticky_string":".header-bottom","mysticky_active_on_height_string":"320","mysticky_disable_at_width_string":"0"};
/* ]]> */
</script>
<script type='text/javascript' src='https://zacheusz.katowice.pl/dev/wp-content/plugins/mystickymenu/js/mystickymenu.min.js?ver=1.0.0'></script>

    I’ve been looking for potential conflicts with other plugins by switching’em off (except of ACF Pro && The Events Calendar plugins, which are recquired for the entire site to work)

    WP Debug is currently on. Caching / minifying etc. is entirely off (besides WP’s native).

    The website uses customized child theme of Benevolent theme.

    Any ideas?

    damiroquai

    (@damiroquai)

    I just try it on a new Benevolent theme and it works with both, #masthead and .header-bottom … probably something with your child theme… I’m not sure, it’s a bit strange since it wraps around…. maybe try to reinstall plugin, just in case.

    Thread Starter piotrscigala

    (@piotrscigala)

    I found the reason.

    I’ve implemented pure CSS sticky footer solution.

    DOM:

    <html>

<body>
	<div id="page">
		<!-- Site content -->
		<div class="push"></div>
	</div>
	<footer id="colophon">
		<!-- Site footer -->
	</footer>
</body>

</html>

    CSS:

    html,
body {
    height: 100%;
    overflow-x: hidden;
}
html {
    overflow: hidden;
}
body {
    overflow-y: auto;
}
#page {
    min-height: 100%;
}
.push {
    height: 287px;
    /* site footer's height */
}
#colophon {
    position: relative;
    margin-top: -287px;
    /* site footer's height */    
    clear: both;
}

    So, in fact div#page is being scrolled, not window or document object.

    Thus, I need solution providing possibility of changing object, which scroll is being detected ??

    • This reply was modified 7 years, 11 months ago by piotrscigala.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Plugins wraps menu with mysticky-wrap, but doesn’t add .wrapfixed class’ is closed to new replies.