Title: Responsive width
Last modified: October 4, 2021

---

# Responsive width

 *  [tomhorner](https://wordpress.org/support/users/tomhorner/)
 * (@tomhorner)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/)
 * Hi there I’m struggling to know what [@media](https://wordpress.org/support/users/media/)
   query css to use in order to control how soon the logo and navigation stack on
   top of one another when the browser width reduces.
 * Is anyone able to make a suggestion? When the browser width is reduced the navigation
   moves below the site logo/title quite quickly and I’d like them to stay side-
   by-side for a bit longer ideally.
 * Many thanks
    -  This topic was modified 4 years, 7 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
    -  This topic was modified 4 years, 7 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Moved to Fixing WordPress, this is not an Everything else WordPress
      topic
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-with%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14940177)
 * First set the element width of the nav element to fixed width (currently the 
   nav is an overly wide percentage) just adequate to cover the content. This way
   there is room for both elements on the same line on narrower screens. If you 
   modify the nav content this width may need to be altered.
 * Then alter the existing media queries that center the elements and auto-widths
   them for widths less than 1200px. Select a preferable width for this to happen.
 * You can override theme CSS by copying the related rules to Additional CSS customizer
   section and modifying the rules there to suit. Your browser’s element inspector
   tool can help you come up with good values for your CSS rules.
 *  Thread Starter [tomhorner](https://wordpress.org/support/users/tomhorner/)
 * (@tomhorner)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14942276)
 * [@bcworkz](https://wordpress.org/support/users/bcworkz/) thanks so much for your
   reply. Would you be able to point me in the right direction to the CSS or PHP
   that I need to look at?
 * I use the additional CSS customiser in WordPress for other modifications and 
   so I’m happy doing this as you suggest.
 * Many thanks
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14943491)
 * I’m not sure what width you want width to use as a media query breakpoint, where
   things get centered and stacked. I used 1024px. Modify as desired.
 *     ```
       .nav-with-logo .builder-module-element .builder-module-navigation-menu-wrapper {
           width: 300px;
       }
       @media only screen and (max-width: 1024px) {
         .site-text {
           text-align: center;
         }
         .builder-module-navigation-menu-wrapper, .nav-with-logo .builder-module-element .builder-module-navigation-menu-wrapper {
           display: table;
           margin: 0 auto;
           vertical-align: inherit;
           width: auto;
         }
       }
       ```
   
 * Ideally, the nav element width should be a percentage, but what that can be depends
   on the chosen breakpoint width. Once you add the preferred breakpoint rules to
   Additional CSS, use your browser’s element inspector tool to try out a workable
   percentage that’s wide enough but not too wide. Once found, edit the 300px value
   accordingly.
 *  Thread Starter [tomhorner](https://wordpress.org/support/users/tomhorner/)
 * (@tomhorner)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14948247)
 * [@bcworkz](https://wordpress.org/support/users/bcworkz/) thanks so much for taking
   the time to post on this. I have not managed to get this to work as required 
   just yet.
 * I’d like to keep the company name and nav on the same line (next to each other)
   for longer when the screen reduces in width. Currently they stack very quickly,
   and so I’m hoping to make them stack at tablet portrait width and below (mobiles
   etc). So ideally on tablets (landscape width) and desktop browsers the company
   name and logo would not be stacked.
 * Not sure if I’m making sense, thanks again for responding.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14951872)
 * I’m pretty sure I understand. The above should have largely accomplished this.
   I did forget one directive though. Replace the first rule set (with the 300px
   width) with this one:
 *     ```
       .nav-with-logo .builder-module-element .builder-module-navigation-menu-wrapper {
           vertical-align: baseline;
           width: 240px;
       }
       ```
   
 * The narrower width here looks a little better IMO. What I mentioned earlier about
   a percentage width being better isn’t going to work as I thought, please disregard.
 * While I used 1024px as the breakpoint where they stack, you could make it much
   narrower if you like, such as 640px when the images stack into a single column.
 * The nav and name should no longer stack until the breakpoint with the above CSS,
   but they don’t perfectly align vertically. This is so even as-is. There seems
   to be some difference in fonts causing this that I cannot identify. The element
   inspector tool says the fonts are identical, but they sure don’t look it. The
   positioning could be further fine tuned, but it will not alter the slight apparent
   difference in font styling.
 * If the above CSS code added to the Additional CSS customizer section fails to
   work as desired, I’ve no further suggestions on CSS code, sorry. This might be
   something better addressed through your theme’s dedicated support channel where
   its devs are in a better position to properly advise.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive width’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [4 years, 7 months ago](https://wordpress.org/support/topic/responsive-with/#post-14951872)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics