The header of the site appears on top of the slider when opened in Fullscreen mode

bob's Avatar

bob

18 Apr, 2017 05:47 AM

Hello Dmitry.

I have a new slider on this page: http://bit.ly/YMA3zW

Works just fine, except when I click the expand arrow in the top-right corner. Then the header of the site is displayed over the full screen slider.

Any help would be much appreciated.

  1. Support Staff 1 Posted by Dmitry Semenov on 18 Apr, 2017 05:52 AM

    Dmitry Semenov's Avatar

    Hello,

    You can try removing z-index via CSS, e.g.:

    .fusion-header-wrapper, 
    .fusion-secondary-header  {
      z-index: auto !important; 
    }
    

    You may also hide the elements via JS, as described here http://help.dimsemenov.com/discussions/royalslider-wordpress/45703-...

  2. 2 Posted by bob on 18 Apr, 2017 06:09 AM

    bob's Avatar

    Thanks Dmitry.

    I used the JS-version of the solution and it worked well.

    All the best.

  3. 3 Posted by bob on 18 Apr, 2017 06:29 AM

    bob's Avatar

    Dmitry.

    One more time, I need a bit of help.

    This is the HTML-markup I am using for this page: http://bit.ly/YMA3zW:

    <div class="rsContent">
      {{image_tag}}
      {{thumbnail}}
      {{html}}
      {{animated_blocks}}
      <h3>{{#link_url}}
      <a class="rsLink" href="{{link_url}}">{{title}}</a>
      {{/link_url}}</h3>
    </div>
    
    And based on the other sliders on the site, I am using this CSS rule to make the title visible under the image, like it is on this page: link
    .new-royalslider-36 h3 {line-height:1.0em; background-color:#f1f1f1 !important; position: absolute; left: 0px; bottom: 0; background: white; padding: 5px;}
    
    But the title is not being visible.

    Can you please help...??

    Thanks much.

  4. Support Staff 4 Posted by Dmitry Semenov on 18 Apr, 2017 11:46 AM

    Dmitry Semenov's Avatar

    Not quite understand why do you use:

    <h3>{{#link_url}}
      <a class="rsLink" href="{{link_url}}">{{title}}</a>
      {{/link_url}}</h3>
    

    ... instead of just:

    <h3>{{title}}</h3>
    
  5. 5 Posted by bob on 18 Apr, 2017 11:38 PM

    bob's Avatar

    Hi Dmitry.

    I was using the default markup that came with that template...:)

    I have now switched it out for what you had suggested and it is working well.

    Thanks much.

  6. bob closed this discussion on 20 Apr, 2017 04:53 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac