Skip to content

Instantly share code, notes, and snippets.

@EdenK
Created July 16, 2018 14:00
Show Gist options
  • Save EdenK/c4b4e5982b33f09434761a4de1a657d7 to your computer and use it in GitHub Desktop.
Save EdenK/c4b4e5982b33f09434761a4de1a657d7 to your computer and use it in GitHub Desktop.
Wordpress: Elementor Pro change nav menu breakpoint css
@media (max-width: 1299px) {
body .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
display: block;
}
body .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
display: flex;
}
}
@media (min-width: 1300px) {
.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown, .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
display: none;
}
}
@media (max-width: 1299px) {
.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
display: none;
}
}
@EdenK
Copy link
Author

EdenK commented Jun 5, 2020

This is a great help, but the any tablet drop down menu styling only kicks in at the default breakpoint (<1025px).

@fippy It was an old solution. right now Elementor already providing a different way to change css breakpoints.

You can change it in Elementor->Settings->Style.

@BrianKendalBucek
Copy link

I just seemed to cross this problem. I have my 7 breakpoints created to which I have everything responsive but for some reason, in the Elementor Navigation Menu, it only allows me to select between the two for the hamburger menu, and neither are close to any of my 7. I've tried going the Astro Child route with adding a function about it there, as well as Custom CSS as I have Elementor pro, and I can't seem to override the 1025 px option for tablet. I want to make it 1519px for the hamburger menu. Any other solutions? PS: I built the entire site out of raw code but my boss insists on having it done via wordpress, lol. Fuck my life.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment