Title: Menu & trigger points (@media)
Last modified: August 21, 2016

---

# Menu & trigger points (@media)

 *  Resolved [lic-8008](https://wordpress.org/support/users/lic-8008/)
 * (@lic-8008)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/)
 * I have only 4 items on my main menu, and would like to show the actual menu on‘
   tablet size’ (@media (min-width: 768px) instead of the mobile menu + keep the
   branding flush left instead of centered in 1 column. There’s plenty space for
   everything…
 * Also: 2 columns switch to 1 already at that size, a bit too early I would say.
   Still plenty of space to show them as-is.
 * At smaller sizes it’s fine to keep the mobile menu and branding centering + columns
   collapse.
 * Basically I would like to still see ‘a standard website’ at about 800px width,
   without already there switching to 1 column mobile mode.
 * Can you advice me on how to?
    site page for checking: [http://www.sicreaweb.com/](http://www.sicreaweb.com/)

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

 *  Thread Starter [lic-8008](https://wordpress.org/support/users/lic-8008/)
 * (@lic-8008)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761756)
 * I temporarily solved the ”columns issue” with Shortcodes Ultimate plugin, it 
   seems.
    Menu issue still to be handled.
 * site page now updated with shortcodes ultimate columns:
    [http://www.sicreaweb.com/](http://www.sicreaweb.com/)
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761844)
 * This should take care of the menu:
 *     ```
       @media (max-width: 992px) {
           #nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.sf-menu {
           	display: block;
           }
       #kad-mobile-nav, #mobile-nav-trigger {
       	display: none;
       	}
       }
       @media (max-width: 768px) {
           #nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.sf-menu {
           	display: none;
           }
       #kad-mobile-nav, #mobile-nav-trigger {
       	display: block;
       	}
       }
       ```
   
 *  Thread Starter [lic-8008](https://wordpress.org/support/users/lic-8008/)
 * (@lic-8008)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761847)
 * Thank you for caring and responding so fast 🙂
 * alas: better, but we are not yet fully there – I checked both manually (resizing
   screen) and with screenfly ([http://quirktools.com/screenfly/](http://quirktools.com/screenfly/))
 * now the menu jumps down on top of the page content, hiding it.
    The logo is flush
   left as desired but its div takes up all of the top space width (at 800px).
 * I usually manage well with css & Inspect Element – but here I don’t seem to find
   exactly where to make my changes. Hence I have to ask you, I’m sorry.
 * site: [http://www.sicreaweb.com/](http://www.sicreaweb.com/)
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761851)
 * ok Yeah I see, try adding this:
 *     ```
       @media (max-width: 992px) {
       .kad-header-left {
       float:left;
       width: 33.33333333333333%;
       }
       .kad-header-right {
       float:left;
       width: 66.66666666666666%;
       }
       }
       ```
   
 * Kadence Themes
 *  Thread Starter [lic-8008](https://wordpress.org/support/users/lic-8008/)
 * (@lic-8008)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761852)
 * **RESOLVED**
    OK THIS WORKS. Thank you so much.
 * To help others, here’s the complete css solution. Copy / paste into child style
   sheet or into custom css in theme:
 * /* MENU CHANGE TRIGGER POINTS (@media) */
    [@media](https://wordpress.org/support/users/media/)(
   max-width: 992px) { #nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.
   sf-menu { display : block; }
 *  #kad-mobile-nav,
    #mobile-nav-trigger { display : none; } }
 *  [@media](https://wordpress.org/support/users/media/) (max-width: 768px) {
    #
   nav-main ul.sf-menu, .nav-main ul.sf-menu, #nav-second ul.sf-menu { display :
   none; }
 *  #kad-mobile-nav,
    #mobile-nav-trigger { display : block; } }
 * /* MENU FLOAT LOGO & BUTTONS */
    [@media](https://wordpress.org/support/users/media/)(
   max-width: 992px) { .kad-header-left { float:left; width: 33.33333333333333%;}
 *  .kad-header-right {
    float:left; width: 66.66666666666666%;} }
 * see it in action here: [http://www.sicreaweb.com/](http://www.sicreaweb.com/)

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

The topic ‘Menu & trigger points (@media)’ is closed to new replies.

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

## Tags

 * [media](https://wordpress.org/support/topic-tag/media/)
 * [trigger](https://wordpress.org/support/topic-tag/trigger/)

 * 5 replies
 * 2 participants
 * Last reply from: [lic-8008](https://wordpress.org/support/users/lic-8008/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/menu-trigger-points-media/#post-4761852)
 * Status: resolved