Puzzled by Mobile Menu Button

Basically you want the mobile header to appear always as if sticky was enabled?

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.

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;
}
}

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?

Yes, thank you. Excellent solution!

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?

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!

Glad you solved ??