Responsive header for one pager

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.

Hi There,

Thanks for writing in!

It’s not ideal to use the ID in more than one place in a page. ID only used once in a page to work properly.

Regarding the CSS I can see you have given IDs but the CSS is for classes.

Can you please confirm if you have classes in the same name that you have in the CSS?

Thanks

Yup, you were absolutely right. That fixed my issue.

Thanks!

We are glad we were able to help, you are welcome :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.