Okay
  Public Ticket #358626
Header under responsive conditions
Closed

Comments

  • Pete started the conversation
    January 25, 2015 at 2:21am

    Hi!

    When viewing at widths less than 1000px my header (where the logo and nav icon are) resizes and stops being transparent.

    How might I adjust this? I am looking to have iPad portrait and landscape perform in the same way, at least as far as the header is concerned.

    Thanks in advance for your help, and also on previous support query. Much appreciated.

    Pete

  •  8,849
    Tahir replied
    January 26, 2015 at 2:23pm

    Hey Pete!

    Add this into the Custom CSS box located in your Salient Options panel :
    @media only screen and (max-width: 1000px) {
    #header-outer {
        background-color: transparent !important;
    }
    
    div#ajax-content-wrap {
        margin-top: -60px;
    }
    
    header#top #logo .starting-logo {
        position: absolute;
        top: 10px;
        opacity: 1!important;
    }
    header#top #toggle-nav i, header#top #mobile-cart-link i, header#top .span_9 > .slide-out-widget-area-toggle i {
        color: #fff !important;
    }
}
    Thanks 

    ThemeNectar Support Team 

  • Pete replied
    February 5, 2015 at 10:18pm

    Thanks Tahir!

    That works for the color/transparency, but I'm also hoping to stop it resizing. Actually, it would be great if my nectar slide content didn't resize too.

    Could you help me with a little extra code to stop the resizing?

    Thanks again, much appreciated.

  •  8,849
    Tahir replied
    February 6, 2015 at 5:04pm

    Hey Again!

    Add this into the Custom CSS box located in your Salient Options panel :
    @media only screen and (min-width: 691px) and (max-width:1300px) {
    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content h2,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content h2,.full-width-content .vc_span12 .swiper-slide .content h2 {
        font-size:45px!important;
        line-height: 51px!important;
    }
    
    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content p,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content p,.full-width-content .vc_span12 .swiper-slide .content p {
        font-size: 18px!important;
        line-height: 31.2px!important;
    }
}
@media only screen and (max-device-width: 1025px) and (min-device-width: 481px) and (orientation: portrait) {
    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content {
        margin-top: -95px !important;
    }
}


@media only screen and (max-width: 1000px) and (min-width: 1px) {
    body header#top #logo img {
        height: 54px!important;
        margin-top: -10px!important;
    }
}
header#top .span_9 > .slide-out-widget-area-toggle {
    
    top: 14px!important;
}

    Thanks

    ThemeNectar Support Team 

  •   Pete replied privately