Prevent mobile btn-navbar going to new row

  • JonathanGiles

    (@jonathangiles)


    10 years ago

    Sorry if this has been asked before – I’ve not been able to find an answer.

    The customizr theme works really well, but I have two issues, one of which I’ll discuss now. The issue is that on a mobile device, when the webpage is scrolled to the top and set to have sticky headers, the site logo is shown centered, and the btn-navbar button appearing right-aligned but on a new row. When I scroll down the header resizes such that the logo is to the left and the button to the right. This reduces the height of the header, and ideally I would have this mode of display always. Is there a way to enable this?

    Thanks so much!
    Jonathan

Viewing 1 replies (of 1 total)

  • Hi Jonathan,
    adding the following to your child-theme style.css should do the trick:

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

Viewing 1 replies (of 1 total)
  • The topic ‘Prevent mobile btn-navbar going to new row’ is closed to new replies.

Tags