Change mobile header breakpoint in Prestige Theme

Technical Q&A
,
1

Hi I need to change the breakpoint of when the header turns to mobile instead of desktop.
For example everything under 1400px should be the mobile header instead of the desktop.
I’m using the Prestige theme.

Any help would be appreciated.

Thanks

2

hi @Erikwebsites

You’ll need to adjust the CSS media query in your theme’s styles. Try this:

  1. Go to Online Store > Themes > Edit Code
  2. Open theme.css or base.css (depending on your theme version)
  3. Look for the media query controlling the header breakpoint, something like:
@media screen and (max-width: 990px) {
    /* Mobile header styles */
}
​
  1. Change 990px (or whatever value is set) to 1400px:
@media screen and (max-width: 1400px) {
    /* Apply mobile header styles */
}
  1. Save and test the site at different widths.