Which elements of the layout to show on different devices can be controlled through CSS and special classes, something like:
@media (max-width: 1024px) { .sm-hide { display: none !important; } .sm-show { display: inline; } } @media (min-width: 1025px) { .sm-hide { display: inline; } .sm-show { display: none !important; } } @media (max-width: 1167px) { .med-hide { display: none !important; } .med-show { display: inline; } } @media (min-width: 1168px) { .med-hide { display: inline; } .med-show { display: none !important; } } @media (max-width: 1267px) { .lg-hide { display: none !important; } .lg-show { display: inline; } } @media (min-width: 1268px) { .lg-hide { ... etc.
Setting the appropriate class for each of your menu bars and defining the screen widths to hide or show each class should allow you to display the correct menus.
So for now I must solve it with adding a class to the menu's so I can target them together with the body class..
for phone:
.profile-phone .phoneMenu {display: block;}
.profile-phone .desktopMenu {display: hidden;}
and for desktop:
.profile-desktop phoneMenu {display: hidden;}
.profile-desktop desktopMenu {display: block;}
For me, only screensizes will not work, because a landscape tablet has the same screensize as small desktops / laptops Maybe it's a good idea to add these classes automatically indeed