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!
