Donnerstag, 4. Mai 2017

Overflow the navigation Bar with the Background image

Let's start

1-  Add a Static ID in your Region. For example IMAGE_DE

2- Add this Css in your Inline Css for your Page Property to set the Image as Background for your Home page

#IMAGE_DE {
    background-image: url(slider-2.jpg);
    width: 100%;
    height: 822px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: inherit;
}

3- Add  this Css in your Page Property to Overflow the navigation Bar with the Background image

.t-Body-nav,.t-Body-title {
  top: -78px !important;
  margin-top: -78px !important;
  padding-top: -78px !important;
}

#t_Body_content_offset {
  height: 0 !important;
  box-shadow: none !important;
}

.t-Header-branding {
  background-color: rgba(0,0,0,0) !important;
  height: 78px !important;
  box-shadow: none !important;
}


4- Add this JAVASCRIPT CODE in Execute when Page Load to show the Navigation when scrolling

$(window).scroll(function() {

    if ($(this).scrollTop() > 100) {

        $('.t-Header-branding').attr('style', 'box-shadow:0 1px 10px rgba(0, 0, 0, 0.2) !important;background:white  !important');
    } else {

        $('.t-Header-branding').attr('style', 'box-shadow:none  !important;background:rgb(0,0,0,0)  !important');

    }


});

Demo




     



Keine Kommentare:

Kommentar veröffentlichen