Remove Toggle Menu Option

Paul,

Thanks for using Ignite!

Removing the responsive menu will take quite a bit of CSS to accomplish. The easiest way would be to take all the CSS for the menu that is currently inside the @media all and (min-width: 50em) media query and add it to a child theme outside of a media query, so it takes effect at all screen widths. There will be some additional styling needed, but that will get you most of the way there.

Here is an empty child theme you can use for your customizations.

Hi Ben,

Thanks for your fast reply on Sunday.

Actually I’m already using a child theme with the Ignite.

Could you clarify please:
-> so I need to remove all the code from the style.min.css file which has the menu parameters out of the @media all and (min-width: 50em) (like this part):
.site-header{height:auto;min-height:130px;padding:0 11.11%}.site-header:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.toggle-navigation{display:none} ...

and that toggle button with its functions will dissapear?

Also I’ve already tried to use another menu plugin and for now the Ignite toggle just overridden it.
So, shall I be able to use the other menu after such a removal of the code?

Thanks for your time.

Sure, so if you wanted the menu to be styled exactly the same at all widths, you’d want the menu styles that only affect the menu at 800px wide and above to affect all widths. The easiest way would be to copy those styles and add them to your child theme outside of a media query, so they take affect right away.

The relevant styles are in style.css from lines 564-729.

There are going to be a few conflicts between the styles, but you should be able to override anything you want. When you have a child theme active, an id called tracks-child is added to body so you can use that to help override other selectors.

Ex.

#tracks-child ul a {
  margin: 24px;
}

You can also always use !important tags if necessary.

Ex.

#tracks-child ul a {
  margin: 24px !important;
}

Thanks Ben,

In this case I’ve found the solution in editing .menu-primary class at max-width:800px;

.menu-primary {
  left: 0;
  padding-top: 0;
  position: static;
  text-align: center;
  width: 100%;
  z-index: 30;
  background: transparent;
  margin-left: 75%;
}

Thanks for your assistant.

You’re welcome, glad you reached a solution ??