Okay
  Public Ticket #431099
secondary header
Closed

Comments

  • J started the conversation

    Hi guys,

    Just wondering if there's a way to have the secondary header behave the same way in regards to transparency / opacity as the main header (i.e. transparent until user scrolls)?

    Would be very cool :)

    Thanks

  •  8,849
    Tahir replied

    Hey,

    Sorry not possible as there is no transparent class added to the secondary header div.

    Thanks


    ThemeNectar Support Team 

  • J replied

    Not to worry - thanks for confirming. I played around a little and achieved what I had in mind - here\'s some (very train-of-thought) code if anyone\'s ever interested:

    -----------------------------------------

    #header-outer[data-format=\"centered-menu\"] header#top nav > ul.sf-menu > li ul {
    margin-top:-1px;
    }

    #header-outer[data-using-secondary=\"1\"] {
    top: 0px;
    height: 140px;
    border-bottom: 1px solid rgba(22,22,22,0.2)!important;
    }

    #header-secondary-outer {
    background-color: transparent!important;
    border-bottom: 0px;
    }

    body[data-header-color=\"custom\"] #header-secondary-outer {
    border-bottom: 0px solid rgba(0,0,0,0.1);
    }

    media=\"all\"
    @media only screen and (min-width: 1001px)
    html body #header-outer[data-transparent-header=\"true\"].transparent {
    background-color: transparent!important;
    box-shadow: none!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0)!important;
    }

    header#top {
    position: relative;
    z-index: 9998;
    width: 100%;
    margin-top: 30px;
    }

    #header-outer {
    box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.22);
    }

    .ascend #header-outer[data-full-width=\"true\"] header#top nav ul #search-btn a, .ascend #header-outer[data-full-width=\"true\"] header#top nav ul .slide-out-widget-area-toggle a {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    }


    -----------------------------------------