Header like this

Maxwomo
Posts: 52
Joined: Tue Mar 08, 2016 1:54 am
Location: Lagos PT
Contact:

Re: Header like this

Postby Maxwomo » Fri May 19, 2017 3:15 am Supported Until: Fri Sep 02 18:06:21 +1000 2016 | Expired

Maxwomo WroteColon
but the features images header is not display full width
on pages 0px margins https://rumtreiberin.com/blog/

0px margins OK

features images header is not display full width

Maxwomo WroteColonhttps://rumtreiberin.com/wohnmobil-reis ... /portugal/ the Headings in images down

OK


Maxwomo WroteColonallways big fullwide image than content and widget https://i.imgur.com/ZQhGQp3.png

thanks

NO

Please allways big fullwide features image
than content left widget right

https://i.imgur.com/iFY0ILQ.png

hungitms
Posts: 175
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Header like this

Postby hungitms » Tue May 23, 2017 7:52 pm

hi. You can use the code below with custom js.

CodeColon Select All Code

if( jQuery('.blog-single .post--single .post__media .post__media-img').length ) {

      jQuery('.blog-single .post--single .post__media').on('thumbnailFullScreen', function(event) {

         var $media = jQuery(this),
             $thumbnail = $media.find('.post__media-img');
             $img = $thumbnail.find('img'),
             src = $img.attr('data-original'),
             width = $media.innerWidth(),
             winWidth = jQuery(window).innerWidth(),
             offsetLeft = $media.offset().left,
             offsetRight = winWidth - offsetLeft - width;

         $thumbnail.css({
            'margin-left': -offsetLeft,
            'margin-right': -offsetRight,
            'background-image': 'url('+src+')',
            'height': 'calc(100vh - 90px)'
         }).addClass('bg-scroll');

         $media.css('overflow', 'visible');

         $img.css({
            'opacity': 0,
            'visibility': 'hidden'
         });

         if( $('.sidebar-widget').length ) {

            if(winWidth >= 992) {
               $('.sidebar-widget').css('padding-top', 'calc(100vh - 80px)');
            } else {
               $('.sidebar-widget').css('padding-top', '');
            }
         }


      }).trigger('thumbnailFullScreen');

      jQuery(window).on('resize', function() {
         jQuery('.blog-single .post--single .post__media').trigger('thumbnailFullScreen');
      })
   }


It only runs in article detail page

Maxwomo
Posts: 52
Joined: Tue Mar 08, 2016 1:54 am
Location: Lagos PT
Contact:

Re: Header like this

Postby Maxwomo » Wed May 24, 2017 4:27 am Supported Until: Fri Sep 02 18:06:21 +1000 2016 | Expired

OK

how can i make the features images header only 550px high ?

hungitms
Posts: 175
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Header like this

Postby hungitms » Wed May 24, 2017 9:03 am

hi. You remove code custom js above and use code custom js below.

CodeColon Select All Code

if( jQuery('.blog-single .post--single .post__media .post__media-img').length ) {

   jQuery('.blog-single .post--single .post__media').on('thumbnailFullScreen', function(event) {

      var $media = jQuery(this),
         $thumbnail = $media.find('.post__media-img');
         $img = $thumbnail.find('img'),
         $map = $media.find('.post__media-map'),
         src = $img.attr('data-original'),
         width = $media.innerWidth(),
         winWidth = jQuery(window).innerWidth(),
         offsetLeft = $media.offset().left,
         offsetRight = winWidth - offsetLeft - width;
      
      $thumbnail.css({
         'margin-left': -offsetLeft,
         'margin-right': -offsetRight,
         'background-image': 'url('+src+')',
         'height': '550px'
      }).addClass('bg-scroll');

      if( $map.length ) {
         $map.css({
            'margin-left': -offsetLeft,
            'margin-right': -offsetRight,
         })
      }

      $media.css('overflow', 'visible');
      
      $img.css({
      'opacity': 0,
      'visibility': 'hidden'
      });

      if( jQuery('.sidebar-widget').length ) {

      if(winWidth >= 992) {
         jQuery('.sidebar-widget').css('padding-top', '560px');
      } else {
         jQuery('.sidebar-widget').css('padding-top', '');
      }
      }


   }).trigger('thumbnailFullScreen');

   jQuery(window).on('resize', function() {
      jQuery('.blog-single .post--single .post__media').trigger('thumbnailFullScreen');
   })
}


and add this css into custom css

CodeColon Select All Code

.header .header__logo:before {
  pointer-events: none;
}

Maxwomo
Posts: 52
Joined: Tue Mar 08, 2016 1:54 am
Location: Lagos PT
Contact:

Re: Header like this

Postby Maxwomo » Wed May 24, 2017 9:04 pm Supported Until: Fri Sep 02 18:06:21 +1000 2016 | Expired

Hello

menue is not sticki https://rumtreiberin.com/carvalhal-port ... bil-22655/
and logo with shadow

thanks

max

hungitms
Posts: 175
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Header like this

Postby hungitms » Wed May 24, 2017 11:11 pm

hi. Please remove all custom css above and add this css into custom css

CodeColon Select All Code

.header .header__logo:before {
  pointer-events: none;
}

.header__wrap {
    background-color: #de3e82;
    border-bottom-color: transparent;
}
.header__nav .nav-menu > li > a,
.hermes-bar, .header__right .header-search__icon {
    color: #000;
}

.header .header__logo {
     position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    padding-top: 1px;
    text-align: center;
    width: 380px;
    height: 190px;
    overflow: hidden;
}

.header .header__logo a {
   display: inline-block;
}

.header .header__logo img {
  max-height: none;
  max-width: 150px;
  transition: all 0.3s ease;
}

.header .header__logo:before {
     content: '';
    width: 260px;
    height: 260px;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #fff;
    z-index: -1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}


@media(max-width: 991px) {
  .header.header--sticky {
    height: 60px;
  }
  .header .header__logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding-top:0;
    width: auto;
    height: auto;
  }
  .header .header__logo a {
    display: table-cell;
  }
  .header .header__logo:before {
    content: none;
  }

  .header .header__logo img {
    max-height: 50px;
  }
}

@media(max-width: 991px) {
  #header {
    height: 60px
  }
   .header.header--has-sticky.header--sticky .header__logo img {
      max-width: none;
   }
}

@media(min-width: 992px) {
   #blog-single {
      margin-top: 0;
   }
   
   .header .header__logo {
      margin-top: 1px;
   }

   .header.header--has-sticky.header--sticky .header__logo {
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
   }
}

@media(min-width: 992px) {
   #heading-page {
      padding-top: 100px;
   }
}

.blog {
   margin-top: 0;
}

Maxwomo
Posts: 52
Joined: Tue Mar 08, 2016 1:54 am
Location: Lagos PT
Contact:

Re: Header like this

Postby Maxwomo » Thu May 25, 2017 4:22 am Supported Until: Fri Sep 02 18:06:21 +1000 2016 | Expired

Hello

i add the css code but the menue is not sticki

https://rumtreiberin.com/carvalhal-port ... bil-22655/

User avatar
pirateS
Site Admin
Posts: 3399
Joined: Wed Nov 05, 2014 11:49 am
Contact:

Re: Header like this

Postby pirateS » Thu May 25, 2017 6:54 pm

Hi,
It's working now. Please add additional code below into custom css

CodeColon Select All Code

.single-post.single #header{
 height: auto !important;
}

Maxwomo
Posts: 52
Joined: Tue Mar 08, 2016 1:54 am
Location: Lagos PT
Contact:

Re: Header like this

Postby Maxwomo » Fri May 26, 2017 2:07 am Supported Until: Fri Sep 02 18:06:21 +1000 2016 | Expired

Hello

i add the code to css

but sticky menue allways not work

max

lillagreen
Posts: 174
Joined: Thu Oct 20, 2016 12:52 pm
Contact:

Re: Header like this

Postby lillagreen » Fri May 26, 2017 12:14 pm Supported Until: Thu Oct 19 12:29:54 +1100 2017

Hi there, I have the same issues with the sticky menu ... It doesn't work at all! :( :?


Return to “Hermes”

Who is online

Users browsing this forum: No registered users and 1 guest