• Resolved jaantunez

    (@jaantunez)


    Hello everybody,

    How can I block the minimized header with menu only in phone view?

    Thks!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • rdellconsulting

    (@rdellconsulting)

    Link to your site?

    You need @media code.

    Need a bit more clarification as don’t fully understand what you want.

    Thread Starter jaantunez

    (@jaantunez)

    My site is viejomusical.com

    When I entered the room from my phone I see the big header image like this and when I scroll down the header look like this picture.

    What I mean is that if I enter from my mobile on any page of my site look directly reduced menu like the second way.

    rdellconsulting

    (@rdellconsulting)

    Try this:

    @media all and (max-width: 480px) {
    .sticky-disabled .tc-header {
        display: none;
    }
    .sticky-enabled .tc-header {
        display: block;
    }
    }
    Thread Starter jaantunez

    (@jaantunez)

    Just copying the code as it is in my css?

    The {} are correct? I see four ‘}’ and two ‘{‘

    Thread Starter jaantunez

    (@jaantunez)

    It′s doesn′t work. When I copy/paste de code you gave me the screen show like this.

    Can you help me, please?

    rdellconsulting

    (@rdellconsulting)

    @d4z pointed me at a similar post which works for me:

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

    (@rdellconsulting)

    Slightly improved version:

    @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;
      }
    .tc-header {
        border-top: none;
    }
    .sticky-enabled .navbar .btn-toggle-nav .btn {
    margin-top: 30px;
    }
    .sticky-disabled .tc-header {
    max-height: 50px;
    }
    }

    Thread Starter jaantunez

    (@jaantunez)

    Hi!! It′s works fine but there is only an issue. As you can see in those pictures the main menu change its appearance when you scroll down.

    Picture without scroll
    Picture with scroll

    rdellconsulting

    (@rdellconsulting)

    Change this selector in above code:

    .sticky-enabled .navbar .btn-toggle-nav .btn {
    margin-top: -7px;
    margin-right: 0px;
    }

    Thread Starter jaantunez

    (@jaantunez)

    it′s working! it′s working!!

    You′re the one, thank you very much!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How can I block the minimized header with menu only in phone view?’ is closed to new replies.