Different header slider on each page

There is a way to put a different header slider on each page? I mean, if i have the front page + contact page + services page, i want to put a fixed slider with a text saying that you are in the page you are.

Same way this frontpage header slider is, no sliding text or image, just a fixed text over an image.

Currently im using a row with a background image, but, the image has a weird behaviour, when you scroll down the page, the background jumps to another position. Also, i had to write the name of the page on photoshop, i wanted to have it written same way as frontpage.

Sorry if im saying same thing all the way.

Thanks in advance

Hello there,

Page builder row is irrelevant solution as it’s basically associated to the page entry content – not page header. The best solution would be modifying the page header with a couple of jQuery and CSS code.

Firstly, you have to enable image header type in your inner pages from Appearance > Customize > Header area > Header type > Site header type. To set different images for specific pages, use the Unique Headers plugin. Once this plugin is active, you can set your header image from page editing screen, in the new Custom header box. To add custom text on it, you can use the below jQuery solution.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){  
  
    $.fn.extend({  
        textToHeaderImage: function(options) {     
            var defaults = {
                maintitle: '',
                subtitle: ''
            };

            var options = $.extend(defaults, options); 

            var subtitle = function(){
              if( options.subtitle != undefined ) {
                return '<p class="subtitle">'+options.subtitle+'</p>';
              }
            }
            
            var headerText = '<div class="header-text">'+
                             '<div class="header-text-inner">'+
                             '<h2 class="maintitle">'+options.maintitle+'</h2>'+
                             subtitle()+
                             '</div>'+
                             '</div>';
            var headerImg = this.find('.header-image');                 

            if( headerImg.length ) {
              headerImg.append(headerText);
            }

        }
    }); // Function ends 

    /* Insert header text definition here */    

    $('.page-id-1007').textToHeaderImage({
      'maintitle': 'My header text',
      'subtitle': 'This is my subtitle'
    });
    
     
})(jQuery);

What you need to do to insert the header text is to insert this code block:


$('.page-id-1007').textToHeaderImage({
  'maintitle': 'My header text',
  'subtitle': 'This is my subtitle'
});

Adjust the page ID to match with your page you wish to have a custom text. You can find it while editing it – in the web browser address bar, you’ll see wp-admin/post.php?post=1007&action=edit.

If you do not want to show the subtitle you will just need to write this:


$('.page-id-1007').textToHeaderImage({
  'maintitle': 'My header text'
});

To add header text for your other pages, duplicate that code block. So you’d have something like:


$('.page-id-1007').textToHeaderImage({
  'maintitle': 'My header text'
});

$('.page-id-1008').textToHeaderImage({
  'maintitle': 'My header text'
});

$('.page-id-1009').textToHeaderImage({
  'maintitle': 'My header text'
});

$('.page-id-1010').textToHeaderImage({
  'maintitle': 'My header text'
});

  1. Update

  2. Add the below extra custom CSS code to Appearance > Customize > Additional CSS.


.header-text{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: table;
}

.header-text-inner{
  display: table-cell;
  vertical-align: middle;
}

.header-text-inner h2.maintitle{
  color: #fff; 
  display: inline-block;
  font-size: 57px;
  line-height: 67px;
  font-weight: 700;
}  

.header-text-inner .subtitle{
  line-height: 40px;
  padding: 20px 0 50px;  
  font-weight: 200;
  font-size: 37px;
  margin-top: -20px;
  color: #fff;
}

@media only screen and (min-width:1025px) {
  
  .header-image {
    height: 500px;
  }
  
}

To hide header image on other pages, add this additional CSS code:


@media only screen and (min-width:1025px) {

  body:not(.page-id-1007) .site-header,
  body:not(.page-id-1008) .site-header,
  body:not(.page-id-1009) .site-header,
  body:not(.page-id-10010) .site-header{
    background-color: rgba(0,18,54,0.5) !important;
  }

  body:not(.page-id-1007) .header-image,
  body:not(.page-id-1008) .header-image,
  body:not(.page-id-1009) .header-image,
  body:not(.page-id-10010) .header-image{
    display: none;
  }
  
  body:not(.page-id-1007) .sydney-hero-area,
  body:not(.page-id-1008) .sydney-hero-area,
  body:not(.page-id-1009) .sydney-hero-area,
  body:not(.page-id-10010) .sydney-hero-area{
    margin-top: 90px;
  }
  
}

Use :not pseudo selector to exclude specific page.

Regards,
Kharis

Almost worked, check what happened.

Title is there, but i couldnt change it’s location using top or left parameters on css. Also that small white space on the top happened.

Thanks for quick reply, again!

Hello there,

> Title is there, but i couldnt change it’s location using top or left parameters on css.

I didn’t see any text over the image header. Have you intentionally removed it?

> Also that small white space on the top happened.

Please try adding this extra custom CSS code to Appearance > Customize > Additional CSS.


@media only screen and (min-width:1025px) {

  .header-image {
    margin-top: -10px;
  }
  
}  

Regards,
Kharis

Hi Kharis, the text is still there on the left top corner, in black, behind logo, hard to see!

Have you applied the extra custom CSS code in the step 5 I’ve mentioned previously here in this thread?

Regards,
Kharis

Yes, i did. Maybe is there other css i put before causing all this mess?

Untill now, that is all css i wrote there.

.slide-item{
height: 75% !important;
}
.footer-widgets{
padding-bottom: 40px;
padding-top: 60px;
margin-top: 80px;
}
.roll-button .button-slider{
height: 50px !important;
border: transparent !important;
background-color: transparent;
}
.roll-button .button-slider a:hover{
height: 50px !important;
border: 1px solid #FFF;
color: #FFF !important;
}
.entry-post{
margin-top: 40px;
}
.title-post{
font-size: 30px !important;
text-transform: uppercase !important;
margin-top: -50px !important;
margin-bottom: -80px !important;
}
@media only screen and (min-width: 1024){
#masthead .container .row {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: -65px !important;
margin-right: -65px !important;
}
}
.contain {
margin-top: -30px !important;
}
.maintitle{
font-family: ‘Montserrat’, sans-serif !important;
font-weight: 300 !important;
}
@media screen and (max-width: 780px) {
.widget-title{
margin-top: 0px;
}
}
.subtitle{
font-family: ‘Montserrat’, sans-serif !important;
font-weight: 200 !important;
font-size: 37px !important;
margin-top: -20px !important;
}
.siteorigin-widget-tinymce .textwidget{
font-weight: 300 !important;
}
.header-clone {
background-color: rgba(0,18,54,0.7) !important;
}
.site-header{
background-color: rgba(0,18,54,0.0) !important;
}
.float-header{
background-color: rgba(0,18,54,0.5) !important;
}
@media only screen and (max-width:1786px){
.site-header .col-md-4 a{
display: inline-block;
width: 225px;
height: 47px;
margin-top: 10px;
padding: 0px;
background-image: url('http://demandpush.com/wp-content/uploads/2017/06/cropped-demand-push_1st-white.png);
}
}
.text-slider {
animation-duration: 0s;
}
.header-text{
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
z-index: 4;
width: 100%;
height: 100%;
display: table;
}

.header-text-inner{
display: table-cell;
vertical-align: middle;
}

.header-text-inner h2.maintitle{
color: #fff;
display: inline-block;
font-size: 57px;
line-height: 67px;
font-weight: 700;
}

.header-text-inner .subtitle{
line-height: 40px;
padding: 20px 0 50px;
font-weight: 200;
font-size: 37px;
margin-top: -20px;
color: #fff;
}

@media only screen and (min-width:1025px) {

.header-image {
height: 500px;
}

}
@media only screen and (max-width: 1025px){
.slide-inner {
top: 25%;
}
}
@media only screen and (max-width: 479px){
.site-header{
background-color: rgba(0,18,54,0.9) !important;
}
.text-slider .subtitle{
font-size: 20% !important;
}
.slide-inner {
top: 15%;
}
}

Hello there,

What will happen if you move the code I suggested to the most top line?

To check whether your code contains some problematic lines, you can validate it with this tool.

Regards,
Kharis

Worked! Thank you :smiley:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Can we somehow add a call to action button into this code as well so that we can also have a separate call to action button on fixed slider of each page?
Also is it possible to have a different site title for each page?
Thank you.

Hello there,

Could you please share me your final code to https://gist.github.com and post its link here? I’d like to start helping you with your code to narrow gap of mistake.

Regards,
Kharis

Thanks for your reply. Before sharing the code, if you don’t mind, I would like to know your thoughts or suggestions about what I am trying to accomplish. I am trying to create single page landing pages in sub directories or folders of an e-commerce site. So it will be like example.com/main/landing1, example.com/main/landing2 and goes on. So would it be easier to create and maintain them with multi-site installation and sydney theme in each installation or single site installation with sydney theme modifications in each page I was asking? And from SEO standpoint which way would be better? I appreciate if you can share your thoughts. Thanks again.

I implemented your code and although it works, it does not exactly behave like sydney theme header both in desktop and mobile. I am not sure whether it is because of Unique Headers plugin or your CSS code. This seems like a lot of customization so I decided to go with multi-site installation. Just wanted to let you know. If at all, I still need the customization I will write back. And I might still ask some other small questions about the theme and for that I will open another thread. Thank you for your time and support. Appreciate it.

Hello there,

I am sorry, SEO is not my expertise. I am afraid I can’t provide you with an exact answer. Sorry :frowning:

In order to apply different main slider for other pages, try this solution, please.

Regards,
Kharis