Hi @michaelb428ping ,
Thank you for reaching out and for explaining your requirement so clearly. I understand that you would like the desktop view (with the top navigation and sidebar) to start showing from 744px instead of 991px.
Currently, the theme does not provide a customizer option to change breakpoints. To achieve this, you will need to update the media query breakpoints inside the theme’s style.css file. For example, wherever you see rules such as:
@media only screen and (max-width: 991px) { /* responsive styles here */ }
You can change the value from 991px to 743px. This will adjust when the mobile and tablet styles are applied.
A helpful suggestion: Instead of editing the main theme files directly, we recommend creating a child theme. By overriding the responsive CSS in the child theme, you can keep your changes safe even after future theme updates.
Warm regards,
Thank you for identifying which file to focus on. (/wp-content/themes/colormag/style.css) After I get this working in style.css, then I’ll move my changes to style.css inside a child theme.
So far I have made these changes inside style.css:
change: min-width: 769px
to: min-width: 744px
change: max-width: 768px
to: max-width: 743px
change: max-width: 767px
to: max-width: 743px
change: min-width: 768px
to: min-width: 744px
However, after I make these changes the top navigation menu is missing when the window size is from 744px to 767px width. The top navigation menu only appears when the window size is 768px and larger. I would like the top nav menu to appear at 744px and larger — How can I fix this?
Also, the sidebar wraps when the window size is 991px and smaller. I would like the sidebar to wrap at 743px and smaller. How can I fix this also?
The style.css file that I am using can be downloaded from wetransfer.com here:
https://we.tl/t-4IDdaKEwJq
Thank you.
Hi @michaelb428ping,
Could you please provide us with your site URL instead of the file? This will allow us to check your site and give you the appropriate solution.
Best regards!
OK, I’ll try and put that on a server so you may see it — it could be a few days. At the moment I have that local in MAMP.
Thank you.
I now have a page on a test server here:
https://digitaldust.net
The regular (non-mobile) top navigation menu should appear from window widths of 744px to 767px (inclusive.) Right now there is no top navigation menu bar for those widths.
Also, the right sidebar wraps when the window size is 991px and smaller. It should instead wrap at 743px and smaller.
To help, I added a script to the page which shows the current window dimensions — it changes as you resize the window.
Thank you for your help!
Hello, is there any news on this?
Thank you.
Hi @michaelb428ping,
The issue seems to be showing because of your changes. Please add the following CSS code to fix the mentioned issue.
@media (min-width: 744px) and (max-width: 767px) {
.cm-primary-nav ul {
display: block;
}
.cm-primary-nav li {
display: inline-block;
}
}
Best regards!
Thank you Amrit, that fixed the issue for the top navigation menu!
There is one last thing — the right sidebar still wraps when the window size is 991px and smaller. I would like the sidebar to only wrap at 743px and smaller. How can I fix this?
Thank you.
Hello, is there any news on how to get the sidebar to only wrap at 743px and smaller?
Thank you.
Hello, is there any news on this?
Hi there,
To get the sidebar to only wrap at 743px or smaller. please add the following css code to fix the issue”
@media screen and (min-width: 743px) {
.cm-content .cm-row {
flex-direction: row;
}
}
Regards!
Hello Nil,
That works. Thank you for your help!
Best Wishes!
