Menu-bar layout choice seems to do nothing?

1
Hello all, I was working on a responsive layout, and I wanted to show a full page menu for landscape tablets. I find out that the browser (while the profile is phone) still keeps showing all the menu's instead of the menu where i have selected that it is the phone menu. This also happens with the tablet menu, and when the browser profile is desktop. (in 6.7.0 & 6.7.1) In the Modeler I made the 3 main-menu's is the project navigation settings and added them on the page: But in the browser, all the menu's are shown: I hope someone can give me some insight about this.
asked
2 answers
0

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.

answered
0

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

answered