Hi there,
I have this site in the progress: https://www.padthaiwokbar.com/uj-rolunk/#enterior
Thing is, at the top, I have this submenu header set up with 3 elements.
Thing is, the site is optimized for numerous display sizes. What I’m wondering is, I noticed that if I have the same #id’s set up for the sections, it brakes on page navigation. DO I have set different ID’s and create separate ID’s for each display sizes. Is there no easier way?
Also, I created a small bit of css for my section’s to add some extra breakpoints:
/*XL*/
@media only screen and (min-width: 1680px) {
.L {
display: none !important;
}
.M {
display: none !important;
}
.S {
display: none !important;
}
}
/* L */
@media only screen and (min-width: 1441px) and (max-width: 1679px) {
.XL {
display: none !important;
}
.M {
display: none !important;
}
.S {
display: none !important;
}
}
/* M */
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
.XL {
display: none !important;
}
.L {
display: none !important;
}
}
However, this code does not work for headers. Example: I add L as a class to the header, and the other display sizes will not dissappear. In cornerstone, this works fine. I added the code to theme options so they should be global.

