Feature Request – responsiveness slider

Hi,

Glad you like the plugin and thanks for the purchase … that’s what pays the bills! ??

OK, so that’s a great feature request. I’ve had a quick look and I have a feeling that what you’re asking may be possible! It will require quite a lot of CSS I think to override the default breakpoint (48em, or 768px) but should be doable. The only thing that might put a spanner in the works is if the responsiveness of the nav relies at all on JavaScript but I don’t think it does!

Anyway, I’ll add it to the “to do” list and update you when I have more news.

Oliver

Cool, thanks a lot! ??

No problem, we have a client who also wants this feature so we’re definitely going to be working on it soon.

Oliver

Just looking into this some more. So as expected, there’s a lot of CSS going to be needed, all of this this will need to be revered to the default mobile menu values and duplicate for the new breakpoint …

@media screen and (min-width: 48em) {

	/* Main Navigation */

	.js .menu-toggle,
	.js .dropdown-toggle {
		display: none;
	}

	.main-navigation {
		width: auto;
	}

	.js .main-navigation ul,
	.js .main-navigation ul ul,
	.js .main-navigation > div > ul {
		display: block;
	}

	.main-navigation ul {
		background: transparent;
		padding: 0;
	}

	.main-navigation > div > ul {
		border: 0;
		margin-bottom: 0;
		padding: 0;
	}

	.main-navigation li {
		border: 0;
		display: inline-block;
	}

	.main-navigation li li {
		display: block;
	}

	.main-navigation a {
		padding: 1em 1.25em;
	}

	.main-navigation ul ul {
		background: #fff;
		border: 1px solid #bbb;
		left: -999em;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 99999;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:before,
	.main-navigation ul li.page_item_has_children:after {
		border-style: solid;
		border-width: 0 6px 6px;
		content: "";
		display: none;
		height: 0;
		position: absolute;
		right: 1em;
		bottom: -1px;
		width: 0;
		z-index: 100000;
	}

	.main-navigation ul li.menu-item-has-children.focus:before,
	.main-navigation ul li.menu-item-has-children:hover:before,
	.main-navigation ul li.menu-item-has-children.focus:after,
	.main-navigation ul li.menu-item-has-children:hover:after,
	.main-navigation ul li.page_item_has_children.focus:before,
	.main-navigation ul li.page_item_has_children:hover:before,
	.main-navigation ul li.page_item_has_children.focus:after,
	.main-navigation ul li.page_item_has_children:hover:after {
		display: block;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.page_item_has_children:before {
		border-color: transparent transparent #bbb;
		bottom: 0;
	}

	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:after {
		border-color: transparent transparent #fff;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		left: 100%;
		right: auto;
	}

	.main-navigation ul ul a {
		padding: 0.75em 1.25em;
		width: 16em;
	}

	.main-navigation li li {
		-webkit-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
	}

	.main-navigation li li:hover,
	.main-navigation li li.focus {
		background: #767676;
	}

	.main-navigation li li a {
		-webkit-transition: color 0.3s ease-in-out;
		transition: color 0.3s ease-in-out;
	}

	.main-navigation li li.focus > a,
	.main-navigation li li:focus > a,
	.main-navigation li li:hover > a,
	.main-navigation li li a:hover,
	.main-navigation li li a:focus,
	.main-navigation li li.current_page_item a:hover,
	.main-navigation li li.current-menu-item a:hover,
	.main-navigation li li.current_page_item a:focus,
	.main-navigation li li.current-menu-item a:focus {
		color: #fff;
	}

	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		left: 0.5em;
		right: auto;
	}

	.main-navigation .menu-item-has-children > a > .icon,
	.main-navigation .page_item_has_children > a > .icon {
		display: inline;
		left: 5px;
		position: relative;
		top: -1px;
	}

	.main-navigation ul ul .menu-item-has-children > a > .icon,
	.main-navigation ul ul .page_item_has_children > a > .icon {
		margin-top: -9px;
		left: auto;
		position: absolute;
		right: 1em;
		top: 50%;
		-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
		-ms-transform: rotate(-90deg); /* IE 9 */
		transform: rotate(-90deg);
	}

	.main-navigation ul ul ul {
		left: -999em;
		margin-top: -1px;
		top: 0;
	}

	.main-navigation ul ul li.menu-item-has-children.focus:before,
	.main-navigation ul ul li.menu-item-has-children:hover:before,
	.main-navigation ul ul li.menu-item-has-children.focus:after,
	.main-navigation ul ul li.menu-item-has-children:hover:after,
	.main-navigation ul ul li.page_item_has_children.focus:before,
	.main-navigation ul ul li.page_item_has_children:hover:before,
	.main-navigation ul ul li.page_item_has_children.focus:after,
	.main-navigation ul ul li.page_item_has_children:hover:after {
		display: none;
	}

	.site-header .site-navigation-fixed .menu-scroll-down {
		display: none;
	}

	/* Scroll down arrow */

	.site-header .menu-scroll-down {
		display: block;
		padding: 1em;
		position: absolute;
		right: 0;
	}

	.site-header .menu-scroll-down .icon {
		-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
		-ms-transform: rotate(90deg); /* IE 9 */
		transform: rotate(90deg);
	}

	.site-header .menu-scroll-down {
		color: #fff;
		top: 2em;
	}

	.site-header .navigation-top .menu-scroll-down {
		color: #767676;
		top: 0.7em;
	}

	.menu-scroll-down:focus {
		outline: thin dotted;
	}

	.menu-scroll-down .icon {
		height: 18px;
		width: 18px;
	}
}

Also, there’s a lot of margin, font, etc CSS that needs to be taken into account as it may be modified elsewhere within the plugin options.

I will keep you updated.

Oliver

Wow, that’s much more complicated than I thought it would be. It’s awesome you’re willing to take on the challenge.

It’s a valid option, so one that deserves sorting. Not sure how long it will take ??

Oliver

I’m not in a hurry. My site is functional as it is, it would just look better on tablets with this option.

OK, I’ve added an option “Navigation Responsive Breakpoint” with a slider that increases the breakpoint from 48em all the way up to 80em … however, it’s rudimental at the moment and may not be what you want.

I realised that with a couple of changes we could make the desktop version of the menu appear with the Menu toggle rather than the mobile version (which will require a lot more CSS than I have used.

Let me know what you think.

Oliver

Hi Oliver,

I’ve tested the slider but there’s some odd stuff going on. On small screens I don’t see any change in behaviour no matter where I position the slider (only a couple of positions possible, is that right?). But on large PC screen, when I make the browser window sufficiently small, the menu disappears altogether, without a mobile menu appearing.

Kind regards,
Antoine

Oh wait, the menu didn’t disappear, it was just hidden behind the wordpress toolbar, so visitors still see it. But it doesn’t seem to make a difference where I put the slider.

It should make a difference! The slider goes from 48em to 80em (768px – 1280px). Increasing the width to and past 768px is where the site currently changes from mobile menu to desktop menu. What this slider does is increase that breakpoint.

On our test site we place the slider at about 2/3 the way to allow the site to go mobile when the menu items start wrapping.

This option does nothing to screens smaller than 768px.

Oliver

That’s weird, I can only place the slider at the very left, exact middle and very right. And I’ve tested on a couple of browsers now (Chrome, Opera, Firefox), and none of them look different when I move the slider. I’ve tried deleting anything header-related in style.css (there’s only something in it now that modifies padding and margin in the footer area). I’ve also deleted the header.php I had in the twenty-seventeen child theme I’m using. Not sure what else I can test to see if it makes a difference?

You’ve got v1.8.6.

Update to v1.8.7 which I pushed tonight just before wrote on here ??

Oliver

Right! Plugins didn’t show an update before but got one now. And it works ??

Only when I make a large screen smaller now until the mobile menu appears, when clicking the hamburger menu the normal menu appears underneath it but looking a bit off. The menu items don’t expand to show the items of the level below for instance.

• This reply was modified 5 years, 11 months ago by aevdh.