Title: Change Navigation Breakpoints? Last modified: August 21, 2016 --- # Change Navigation Breakpoints? * [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/) * Hi! First off, great work – all of you. You’ve got a great product. * I’m wondering where I can find the breakpoints for the navigation, or if I should just override them by adding my own CSS. I’m using a child theme, so I’m not worried about it breaking on update, but I do want to avoid the navigation wrapping to two lines if at all possible. * If I should just override the existing `@media` queries, what selectors do I need to style in order to make the navigation switch to the mobile view (i.e. the little menu button)? Sorry if that’s a silly question 🙂 * The site is currently at [http://ratmak.com](http://ratmak.com), if you need a reference. * Thanks so much for your help! * Best wishes, * Tom. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/change-navigation-breakpoints/page/2/?output_format=md) [→](https://wordpress.org/support/topic/change-navigation-breakpoints/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423170) * Do you have Google Chrome? * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423178) * I do, as a matter of fact. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423179) * Are you familiar with Chrome’s developer tools? [http://developers.google.com/chrome-developer-tools/](http://developers.google.com/chrome-developer-tools/) * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423182) * Familiar with them, but I didn’t realize I could use them to actually edit the breakpoints in the theme. I go back and forth between Chrome’s dev tools and Firefox with the Chris Pederick’s Developer Toolbar. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423185) * I think this containing element: * ```
``` * Is the one that has the most breakpoints applied to it, resize your screen to find them out – the developer toolbar will show them. * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423192) * Ah, thank you. I’ll check that out in a second! So once I find them, where will I change them? If I recall correctly (which is not always a sure bet :P), the Customizr CSS only contained 1 or 2 media queries. Are they wrapped into LESS files or something, or are they readily accessible? I’ll dive in and double check after I submit this … you know, the reverse of the way I should do it 🙂 * [chappie](https://wordpress.org/support/users/chappie/) * (@chappie) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423208) * Wow – you’ve got a lot of stuff going on there. If you can’t be persuaded to combine some menus (add Departments under Ewing Council and maybe Citizen Boards under Administration – or even put Ewing Council + Departments under Administration), you might get some relief by playing around with this snippet: * ``` /* change menu margins + nowrap */ .navbar .navbar-inner { margin: 15px 20px 10px 0px; padding-left: 5px; white-space: nowrap; max-width: 97%; } ``` * That might delay your line wrap a little longer. Alternatively, you can force the 3-bar menu to kick in at a bigger media size but someone more capable than me will have to chime in with that. Here again, the 3-bar menu will be happier/ more graceful with fewer parent menus. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423213) * Sorry to clarify you select that element in the HTML section of the toolbar as so: [http://snag.gy/ng33R.jpg](http://snag.gy/ng33R.jpg) (outlined in red) * Then look on the right-hand side for the media query: [http://snag.gy/cpHY6.jpg](http://snag.gy/cpHY6.jpg)( outlined in red) * When you resize the screen it should automatically update the CSS on the right- hand side with the relevant media query, e.g: [http://snag.gy/CHNKa.jpg](http://snag.gy/CHNKa.jpg) * [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) * (@rdellconsulting) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423216) * It’s all based on Twitter Bootstrap 2. * I’ve extracted all the [@media](https://wordpress.org/support/users/media/)’s used in the (color).css so you can see what is used: * ``` @media print { } @media (min-width: 768px) and (max-width: 979px) { } @media (max-width: 767px) { @media print { } @media (min-width: 1200px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (max-width: 767px) { } @media (min-width: 480px) and (max-width: 767px) { } @media (max-width: 480px) { } @media (max-width: 979px) { } @media (min-width: 980px) { } /* Media queries */ @media (max-width: 1200px) { } @media (max-width: 979px) { } @media (max-width: 767px) { } @media (max-width: 480px) { } @media (max-width: 320px) { } ``` * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423226) * [@chappie](https://wordpress.org/support/users/chappie/) – No kidding. I wish I could combine some of these things, but the powers that be are pretty tight on what can be listed under what, because it implies control. For example, you’d think the Court would be a Dept., but no. I actually took things out of the nav completely to try to shave it down, hence the Calendar only appearing in those big circular callouts. At any rate, thanks for that snippet! I think I might use it (or some iteration thereof) along with changing the `@media` queries. * [@andrew](https://wordpress.org/support/users/andrew/) – AHA! Thanks for that– I see exactly what you mean now. So, just to be sure (I’m obv new at these), I should be able to override those in the Custom CSS field, yes? Or even just directly in the `style.css` of my child theme? Or is there a better way to accomplish this? * Again, thanks so much, guys! * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423229) * [@dave](https://wordpress.org/support/users/dave/) Bardell – Thanks! Very helpful, especially for us noobs 😛 * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423231) * > o, just to be sure (I’m obv new at these), I should be able to override those > in the Custom CSS field, yes? Or even just directly in the style.css of my > child theme? Or is there a better way to accomplish this? * I think [@rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) will be better to answer you that, but note that not using any media query in your Child Theme or Custom CSS plugin will/ should override all media queries. * [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) * (@rdellconsulting) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423232) * I recommend you test in CustomCSS and when happy, move it to a [child them](http://www.themesandco.com/snippet/creating-child-theme-customizr/) e style.css. * Thread Starter [Ratmak](https://wordpress.org/support/users/ratmak/) * (@ratmak) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423302) * So I’m gonna have to ask you guys another potentially silly question. * I’ve found that we start wrapping to two rows at about 1680px. That’s really quite wide, I know, but I don’t really know as there’s much else I can take out of the nav. I’ve poked around the internet, but I haven’t found an answer: Can I add an additional `@media` query to Bootstrap’s layout system, or is that not an option? I tried using one of the collapsing queries as a template and changing the `max-width` value, but it didn’t seem to have any effect at all. * Even just a shove in the right direction for a good, clear source on this would be awesome. Thanks again! * Tom. * [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) * (@rdellconsulting) * [12 years, 3 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/#post-4423320) * You can add [@media](https://wordpress.org/support/users/media/) statements to work at any point you choose. So you could adjust the CSS to change the font- size, for example, when greater than 1680px. * You can have as many [@media](https://wordpress.org/support/users/media/) as you like but a) don’t overbloat your css b) remember to use a sensible order so different [@media](https://wordpress.org/support/users/media/)’s don’t conflict with each other. * Try it in CustomCSS to get a quick success/fail. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/change-navigation-breakpoints/page/2/?output_format=md) [→](https://wordpress.org/support/topic/change-navigation-breakpoints/page/2/?output_format=md) The topic ‘Change Navigation Breakpoints?’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png) * Customizr * [Support Threads](https://wordpress.org/support/theme/customizr/) * [Active Topics](https://wordpress.org/support/theme/customizr/active/) * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/) * [Reviews](https://wordpress.org/support/theme/customizr/reviews/) ## Tags * [break](https://wordpress.org/support/topic-tag/break/) * [desktop](https://wordpress.org/support/topic-tag/desktop/) * [media](https://wordpress.org/support/topic-tag/media/) * [mobile](https://wordpress.org/support/topic-tag/mobile/) * [nav](https://wordpress.org/support/topic-tag/nav/) * 16 replies * 5 participants * Last reply from: [lohaus](https://wordpress.org/support/users/lohaus/) * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/change-navigation-breakpoints/page/2/#post-4423551) * Status: not resolved