Title: Puzzled by Mobile Menu Button
Last modified: August 22, 2016

---

# Puzzled by Mobile Menu Button

 *  Resolved [fwunder](https://wordpress.org/support/users/fwunder/)
 * (@fwunder)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/)
 * Having great fun with Customizr, but now I’m stumped.
 * I wish for the mobile menu button to appear in top right of header upon media
   query break.
 * Currently, it appears in bottom right of header at about 960px and the jumps 
   to top right at about 760px or at sticky-menu-enabled. The top right position
   is the sticky-menu-enabled position @ 960. If I could force sticky-menu-enabled
   @ 960, I’d be happy!
 * Seems to be some javascript stuff going on that can’t be overcome wit css.
 * Thanks for any info!

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

 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897406)
 * Basically you want the mobile header to appear always as if sticky was enabled?
 *  Thread Starter [fwunder](https://wordpress.org/support/users/fwunder/)
 * (@fwunder)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897424)
 * Yes. That would work. Thanks.
 * Edit: I should qualify that there is “desktop” (980+), sticky desktop, mobile
   and sticky mobile.
 * I’m not sure where all the media query breaks happen, but on iPhone/ipad portrait
   and iPhone landscape, mobile sticky-enabled header would be the most attractive.
 * Thanks again.
 *  Thread Starter [fwunder](https://wordpress.org/support/users/fwunder/)
 * (@fwunder)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897437)
 * Answering my own question…this seemed to work pretty well for me.
 * Perhaps it will help others?
 *     ```
       @media screen and (max-width: 978px) {
       .nav-collapse, .nav-collapse.collapse {
           width: 50%;
          }
       h2.site-description {
               display:    none;
           }
       .tc-header .brand {
           float: left !important;
           padding-left: 10px;
           position: relative !important;
           margin: 0 !important;
           text-align: left;
           width: 80%;
           z-index: 2;
       }
       .tc-header .outside {
           display: none !important;
       }
   
       .navbar-wrapper {
           float: none !important;
       }
       .navbar-wrapper {
           position: relative;
           z-index: 1;
       }
       }
       ```
   
 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897445)
 * Hi yes, I was about to link you an old topic where I put a code similar to your
   one:
 *     ```
       @media (max-width: 979px){
         .tc-header {
           border-bottom: none;
         }
   
         header.tc-header {
           min-height: 40px;
         }
         .tc-header .brand{
           float: left;
           width: 80%;
           text-align: left;
           padding-left: 10px;
           position: relative;
           z-index: 2;
         }
   
         header.tc-header .outside,
         header.tc-header  .social-block {
           display: none;
         }
   
         /* shrink header img by default*/
         .tc-header .site-logo img {
           height: 30px!important;
           width: auto!important;
         }
         .tc-header .brand h1, .tc-header .brand a{
           margin: 10px 0px;
         }
         .tc-header .brand .site-title {
           font-size: 0.6em;
           line-height: 1.2em;
         }
         .tc-header .navbar-wrapper {
           float: none;
           position: relative;
           z-index: 1;
         }
         .tc-header .navbar .navbar-inner{
           margin: 0px;
           -webkit-box-shadow: none;
           -moz-box-shadow: none;
           box-shadow: none;
           background: none;
         }
         .tc-header .navbar .btn-navbar {
           margin: 9px 0px;
         }
         .tc-header .nav-collapse{
           /* default fallback */
           background: rgb(255, 255, 255) transparent;
           /* nice browsers */
           background: rgba(255, 255, 255, 0.9);
           /* IE 6/7 */
           filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
           /* IE8 */
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
         }
       }
       @media (max-width:480px){
         .tc-header .brand .site-title{
           font-size: 0.5em;
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           overflow: hidden;
         }
         .tc-header .brand h1, .tc-header .brand a{
           margin: 10px 0px 0px;
         }
       }
       ```
   
 * which should cover some other cases, and should be but in the child-theme style.
   css because of the use quotes and double quotes in it.
    😉
 * p.s.
    would you mind marking this topic as resolved?
 *  Thread Starter [fwunder](https://wordpress.org/support/users/fwunder/)
 * (@fwunder)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897448)
 * Yes, thank you. Excellent solution!
 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897449)
 * You’re welcome, your one was fine too, mine should be just more general, but 
   I think your one was good on your specific case (I mean for your header settings),
   right?
 *  Thread Starter [fwunder](https://wordpress.org/support/users/fwunder/)
 * (@fwunder)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897451)
 * Yes, you are correct. For my particular situation my solution works well. It 
   was a little tricky because I wanted to maintain a larger logo and reduce the
   width of .nav-collapse. I ended up moving .nav-collapse and .btn-navbar down 
   from the top @ 979 as not to be behind larger logo. The zindexes of the header
   elements are tricky.
 * Your code gives me some additional tools.
 * Thanks again!
 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897452)
 * Glad you solved 😀

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

The topic ‘Puzzled by Mobile Menu Button’ 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/)

 * 8 replies
 * 2 participants
 * Last reply from: [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/puzzled-by-mobile-menu-button/#post-5897452)
 * Status: resolved