Fixed banner conflict with Full Width Slider
  • Hi, I'm battling trying to get a full width slider addon to show, after having battled to fix my banner (logo and navigation menu). Having fixed my navigation menu (via a panel on a master page, and some code from other forum solutions), my slider is not visible. I read something about Jquery, but I'm not knowledgable enough to understand this reference.
    Is there a conflict between the code to fix the header, and the slider that is causing the slider not to show?
    thanks
    John
  • Hi John,

    Almost impossible to give out solutions with nothing to see or work with, we would need to see a live link to the problematic site/page so that we can try and debug via a source view of code already implemented.

    Not ready to publish to your main folder on the hosting server? Have a look at Neil's tutorial with regards to creating a test area on the server (link below) and then post back here with a URL link

    http://www.seriftuts.com/webplus-tutorials/creating-a-sub-directory-for-website-testing

    Hope this helps
  • Thanks Mick
    I've got a testsite up and running, url is http://testsite.abbotslodgebandb.co.uk/
    any thoughts on what the code is doing to prevent the slider images from appearing would be very gratefully received!
    thanks
    John
  • Hi John,

    I'm not at my normal work station until late tomorrow afternoon (Sunday) but on a quick look of your source code, I think the problem is down to you adding multiple calls to jquery.js

    The script you have running for something on the lines of panel anchor scroller is using this call at the beginning of the code

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;

    Try removing it because you already have a call to jquery further up the page

    <script type="text/javascript" src="wpscripts/jquery.js"></script>

    If that doesn't work, I'll try and dig a little deeper tomorrow

    Hope this helps in the mean time
  • Hi Mike, thanks, that worked.

    If you revisit my temporary site page, it's working now, but I have another, similar issue, which is that the text box (and bullet points at the centre bottom of the slider) all scroll over the fixed header rather than under. I can't see where I can amend the z-index for these items? Is that what I need to do, and if so, can you show me how/where to do this?
    thanks
    John
  • Hi John,

    It'll be a trial and error shot here as it will be down to how you have created/implemented the fixed header but I'm guessing its using a Webplus Panel, if so, try this:

    Right click the panel and choose HTML Source, when the properties window opens, scroll and look for the start of the preamble code for the panel and will look similar to the below

    <!--Preamble for Panel panel_1-->

    Scroll across to the right until you can find this code /*Add Style*/

    Highlight this code and replace it with z-index: 9999; and then close the dialog window and preview in a browser to see if that forces the header panel to be above all other content. Let us know if that sorts the query for you.
  • thanks Mick
    unfortunately I'm not seeing that preamble code for the panel, just this:

    <!-- Panel panel_3 -->


    <div id="panel-anchor"></div>

    <div id="scroller" style="margin-top:0px; width:1024px;">


  • how does one amend the CSS, I was pointed at that by someone, but I can't see how to access that for the slider?
  • You don't need to add anything to the slider, its the header that needs the z-index setting

    Send me your file over via my dropbox link but make sure you choose the option of Webplus X8 - File > Save As A Package and then use this file to send over. I'll then have a look at why you cant add the z-index using the information I have already given you

    https://www.dropbox.com/request/XbskJqTrcL1QQjEhhhP4
  • thanks Mick, on its way to you
  • Right I think the problem is your code copy and paste

    When viewing the html source of BOTH panels (master page A & B) you have placed the code in the right place but it shows as /z-index: 9999;/ and it should be z-index: 9999;

    Remove the first and last / characters on both master page panels and then preview again.
  • thanks Mick,
    sadly that doesn't solve it for me. I get the slider going behind my fixed header, but not the text box on the images in the slider, nor all the text below the slider, which all goes over my fixed header?
  • Well it works for me, in Internet Explorer 11 as my browser but then fails to do so in Google Chrome and Mozilla FireFox

    The only other thing I tried was to still use the same code for both master pages as outlined above but then I also removed all other HTML Frag boxes OFF the home page and just left the frag box for the full width slider, this then cured the layer problem and "everything" on the home page slid underneath the header including all the text etc no matter which browser I was using.

    That's about the only information I can give you really with regards this layer issue and hope it helps a little.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion