Change menu breakpoint

Hi chloeponee,

Looks like there are some left over 768 widths to change. In style.css at line 5799:

@media (min-width: 577px)
.sticky-header-wrapper * {
    width: 100%;
}

At responsive.css line 326:

@media only screen and (max-width: 577px)
.mobile-header, .menuHideBtn {
    display: block;
}

There’s something else going on with the wider regular menu where it overflows off screen. I don’t have time to work it out right now, got a plane to catch. See what you can work out using the element inspector tool. I’ll check back later.

Found it! responsive.css line 26:

@media only screen and (max-width: 1140px)
.not-full.outter-wrapper, .is-full .inner-wrapper, .sticky-header-wrapper .wrapper, footer .wrapper {
    width: 100%;
    max-width: 768px;
/* more rules follow that remain unchanged...*/

Thanks again for your help!

I applied the change in the responsive.css file of my custom theme (/public_html/test01/wp-content/themes/ChloeCake/enoki/css), however it doesn’t seem to work.

Maybe something else in my code is block it?

The issue lies beyond correction with CSS alone. There’s some JavaScript that sets the .sticky_placeholder element’s height to 56.1875px for mobile, and 119.594px for widths 768 and over, but sets it to 0 between 577 and 768 widths. It needs to retain the 119.594px height where it’s now 0. If that can be done, I believe my previously suggested CSS will work correctly.

I suspect the script responsible is in your theme’s /js/scripts.js starting at line 894, but I don’t know what to do to correct the issue. JavaScript is not my strong suit.

One alternative I can see is disabling the entire sticky menu script and accomplishing it with CSS alone. The drawback is if the menu’s content would be modified, all the related CSS would need to be re-evaluated. The script currently manages this for you.

The other alternative would be to find someone who knows enough JavaScript to make the corrections to the script.

Hi, I think I’ve applied your snippets correctly. I had a look at my responsive.js file, but I also don’t know how to read JS.

Here is an example snippet from the file if that helps:

	jQuery(document).ready(function($){

		if ($('.canon_sticky').size() > 0) {

			// add stickyness to these elements
			var stickySelectorClass = ".canon_sticky";
			var $stickyElements = $(stickySelectorClass);
			$stickyElements.each(function(index) {
				$(this).wrap('<div class="sticky_placeholder"></div>');	
			});

			
			// init vars
			var adjustedOffset = 0;
         	var windowPosition = 0;
         	var placeholderOffset = 0;
	        var $win = $(window);

			updateStickyPlaceholderHeights();				// set height of this subject's placeholder
			$win.on('scroll', stickyScrollEvent);

			// UPDATE PLACEHOLDER HEIGHTS ON WINDOW LOAD (TO PROTECT AGAINST LATE ARRIVAL CONTENT)
			$(window).load(function() {
				updateStickyPlaceholderHeights();
			});

         	// ON RESIZE
			$(window).resize(function () {

				// turn off old scroll event to allow for new
				$(window).off('scroll', stickyScrollEvent);

				updateStickyPlaceholderHeights();
				$win.on('scroll', stickyScrollEvent);	

			}); 


		}

Is there a specific forum for JS questions somewhere? Perhaps I can rephrase my question there.

That belongs to your theme, yeah? Your theme’s dedicated support channel is probably your best bet. After all, it’s their code.

Sorry to leave you hanging with this. I had thought this was a CSS only adjustment. I failed to notice some JS was at play.

Thanks for you help!

Unfortunately my theme doesn’t seem to be available anymore (https://themeforest.net/item/enoki-personal-blog-for-foodies/11585451)

I contacted the creators (ThemeCanon) via email, but they don’t seem to be active anymore so I doubt I get a response back.

Anyone else out here with Javascript skills who could help out?