Ako zmeniť mobilný breakpoint pre Divi menu

Vstavané menu Divi témy, má nastavenú šírku 980px pre zmenu z normálneho menu, na menu mobilné. Keď však máte menu plné položiek, pri menších zariadeniach sa začne toto menu zalamovať na ďalší riadok a vyzerá to minimálne divne a zároveň neprofesionálne.
Riešenie je zredukovať počet položiek menu (združiť ich do vysúvacieho – drop down) menu. Druhé riešenie je zmeniť breakpoint pre zobrazenie mobilného menu.

/* Zmena breakpointu pre štandardné Divi menu z 980px na 1140px */
@media only screen and ( max-width: 1140px ) {
  #et_mobile_nav_menu {
  	display: block;
  }

  #top-menu {
	display: none;
  }
}

Toto si vložte v child téme Divi do svojho stylesheet-u, alebo v nastaveniach témy na karte „General“ – „Custom CSS“.

/* Zmena breakpointu pre Divi menu z Theme builder-u z 980px na 1140px */
@media only screen and ( max-width: 1140px ) {
  .et_pb_menu .et_pb_menu__menu {
    display: none !important;
  }
  
  .et_mobile_nav_menu {
    display: block !important;
  }
}

Opäť, túto definíciu css si vložte do stylesheet-u svojej child témy Divi, alebo v nastaveniach témy na karte „General“ – „Custom CSS“.

Samotné nastavenie breakpoint je definovaný ako max-width: 1140px – zmenou tejto hodnoty, zmeníte breakpoint pre zobrazenie mobilného menu (nezabudnite, že mobilné menu sa zobrazí až pod nastavenou hodnotou, čiže pri šírke: 1139px – pre tento príklad).