Disable responsive menu

Basically – i want to do this, but in Pure and Simple theme https://stackoverflow.com/questions/14683659/how-to-control-the-responsive-navigation-menu-in-the-wordpress-twenty-twelve-the

Hi Jbowater,

You need to remove the media queries related to the navigation from the style.css

Thanks

Hi,

Thanks – I had tried removing different parts of this and couldn’t get it to work, so I just removed the whole thing but nothing changed. Could you paste the code I should remove here please so I can see what to take out?

Thanks.

Hi Jbowater,

We hope that you got the solution. if you face any problem, please let us know.

Thanks

Hi,

I’ve fixed the issue with the small ‘menu’ button that appears below 782 pixel width and that’s working fine. The only problem is that between 782 – 992 pixel width the menu tried to adopt the standard menu style for the web page, but the menu bar jumps down and doesn’t display

I’ve now put the site live so you can see the issue – https://www.cactosfp7.eu/ . Below 782 pixel width you get a nice black menu button, above 992 you see the standard menu. But between 782 and 992 you can a strange issue.

Any ideas?

Thanks,
James

Any ideas on this?

Cheers

On further investigation, I noticed a slight difference which might hold a clue.

So the following pixel widths have the following results

Above 993 = full menu and fine
783 – 992 = full menu, shifted places so its wrong (Too high)
768 – 782 = Mobile menu, but shifted so its wrong (too high)
Below 767 = Mobile and fine

Therefore, the shift isnt exactly the same as whether it’s mobile/full menu. The annoying shift occurs between 768 and 992 pixel width, whether it is in mobile mode (768 – 782) or full mode ( 783 – 992). So it doesnt seem connected to the pixel width for the mobile/full menu spilt, but something else… Just not sure what!

Cheers,
James

Okay – so I fixed the issue between 768 and 782… In my custom CSS I had this…

@media all and (min-width: 768px) {
.navbar {
position: relative;
top: -51px;
}
}

I changed the 768 to 783 and it fixed it, as it covers the proper pixel widths.

Now it’s just the issue between 783 and 992 pixels. Unfortunately there is nothing in my CSS which relates to that pixel range so it doesn’t look like the same issue as the one I just fixed between 768 and 782 ??

Okay, when I inspect element i see this…

class=”toggle-container visible-xs visible-sm hidden-md hidden-lg”

if I change visible-sm to hidden-sm. It massively improves it – it removes the issue, but does make the menu disappear enitrely for a small 25 pixel range. How can i make this change happen permentently in the editor?

Okay… Think i worked out how to change it. In my style.css file I have the following:

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
	  .visible-xs {
		display: block !important;
	  }
	  table.visible-xs {
		display: table;
	  }
	  tr.visible-xs {
		display: table-row !important;
	  }
	  th.visible-xs,
	  td.visible-xs {
		display: table-cell !important;
	  }
	.featured-image-style1,
	.featured-image-single {
		margin: 1.250rem 0;
		float: none;
		text-align: left;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}

I’m guessing I need to change it in one of the 768 – 991 sections to tell it to change visible-sm to hidden-sm between those widths. Could you tell me how and then it should be done! (I hope!)

Thanks

Just for anyone trying to work this out I fixed it! I added this to my custom CSS

@media all and (min-width: 783px) and (max-width: 991px) {
  .visible-sm {
    display: none !important;
  }

To hide that .visible-sm div between those sizes.

The mobile menu was dissappearing between those 25 pixels as I was changing it from 768 instead of 783 elsewhere.

Sorted!