Title: Change responsive menu breakpoint
Last modified: August 22, 2016

---

# Change responsive menu breakpoint

 *  [hoyorkney](https://wordpress.org/support/users/hoyorkney/)
 * (@hoyorkney)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/change-responsive-menu-breakpoint/)
 * Hi,
 * Anyone know how to change the responsive menu breakpoint(s) for this theme?
 * Thanks.

Viewing 1 replies (of 1 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/change-responsive-menu-breakpoint/#post-5904280)
 * Changing responsive breakpoints in a theme isn’t a simple thing to do, particularly
   in this complex theme.
 * If you look at the theme’s style.css you can see where the current breakpoints
   are, and then override them as you wish using custom CSS.
 * For example, on line 2221 you’ll see this section
 *     ```
       @media only screen and (min-width: 1140px) {
           body,
           html {
               height: auto;
           }
           .bcg {
               background-repeat: no-repeat;
               background-attachment: fixed;
               background-position: center center;
               background-size: cover;
               height: 100%;
               width: 100%;
           }
   
           section {
               height: 600px;
               min-width: 768px;
           }
           .hsContainer {
               height: 100%;
               position: relative;
               overflow: hidden;
               width: 100%;
           }
       }
       ```
   
 * To change that, copy the CSS into your custom CSS (or a child theme) and modify
   the number 1140px to something else. You can repeat that as needed for the other
   elements whose breakpoints you want to change.
 * Don’t edit the theme files directly, otherwise your changes will be overwritten
   whenever the theme is updated.
 * An easy way to add custom CSS is to install the [Jetpack plugin](http://jetpack.me/)
   and activate the [Custom CSS](http://jetpack.me/support/custom-css/) module. 
   You’ll then add your custom CSS in the new stylesheet editor that’ll appear in
   your dashboard, under Appearance > Edit CSS.
 * As alternatives, you could either install a [standalone custom CSS plugin,](http://wordpress.org/plugins/search.php?q=custom+css)
   or create a [child theme.](http://codex.wordpress.org/Child_Themes)

Viewing 1 replies (of 1 total)

The topic ‘Change responsive menu breakpoint’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/harmonic/1.1.2/screenshot.png)
 * Harmonic
 * [Support Threads](https://wordpress.org/support/theme/harmonic/)
 * [Active Topics](https://wordpress.org/support/theme/harmonic/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/harmonic/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/harmonic/reviews/)

## Tags

 * [breakpoint](https://wordpress.org/support/topic-tag/breakpoint/)
 * [breakpoints](https://wordpress.org/support/topic-tag/breakpoints/)

 * 1 reply
 * 2 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/change-responsive-menu-breakpoint/#post-5904280)
 * Status: not resolved