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.
  • Hi Mick,

    I have only now found time to get back to my work on this website! I'm wondering if you can help me. I realise I should probably start another thread for this, but wasn't sure how to title it!

    I've uploaded a current version of the site http://testsite.abbotslodgebandb.co.uk/ to make it easier to explain my issue. I'm trying to get a drop down navigation menu when you click on the 'ABOUT' text in header menu. If you click on the ABOUT word currently, it will take you to a page, and then if you hover over the word ABOUT again, you'll see I get the drop down menu, but it's not always 'clickable'.

    Basically, I'm trying to replicate what we have on another site of ours (www.cruckbarn.co.uk) which was not produced on Serif software... Any thoughts on how I might get the same effect (that clicking from any page on the ABOUT text just brings up the drop down menu to then select a site page, but this drop down menu is part of the fixed header).

    I'd be VERY grateful for any help!

    thanks, John
  • Hi John,

    First of all I think the reason not all of the menu is clickable is because of the size of the Panel you're using to house the navigation bar, try shrinking it down so it doesn't cover the first item in the dropdown menu.

    Next it sounds as thought he menu is sitting behind the slider on the homepage. Just so I'm sure, you're using the same menu for the homepage as you are on the rest of the site?

    Neil
  • thanks for getting back to me Neil. I've been working on it, and there should be an updated testsite online. You'll see on this one, on the home page, that if you run your mouse along the page names across the header, they change colour to indicate a hyperlink. The 'ABOUT' text doesn't do this (which is a problem!, more of that in a mo!), but if you click on this, you'll see I've got the drop down menu to appear, with 'child-of' pages listed, hyperlinked. Two issues I have now are 1) I would like the 'ABOUT' text to change colour to encourage you to click on it and 2)when the browser page is resized, the drop down menu stays in the right place horizontally relative to the 'ABOUT' text it's linked to, but then beyond a certain size it gets left behind (moves right relative to the word). If this makes any sense, and you have any thoughts, that would be great! thanks very much, John
  • just rereading your message, Neil, perhaps I'm better going back to the method I was trying previously, (using a navigation button, rather than using a panel as I am now), as this will potentially overcome the hyperlink colouring issue and positioning problems (if I can overcome the scrolling issue I was having?)
  • trying the navigation button is an issue I think (just trying it), as I don't want the click on the word 'ABOUT' to take you to a page, just produce the drop down menu... any ideas on the best way forward?! thanks!
  • Hi John,

    The resizing browser issue isn't a problem as the page content can't be viewed anyway when going past the point where the dropdown moves across the page.

    Regarding the 'about' colour on hover - I'm not sure how you've set it up so you'd need to see if there are any options in WebPlus such as hyperlink colour change that you can use.
  • Hi Neil
    sadly I find when I resize my browser (Chrome), the drop down menu box starts to move away from position while I can still see the pages across the top...
    to make the drop down panel visible when I click on the word ABOUT, I've used an 'action'. I can't see how you use anything else to make the panel visible?
    Is there any chance to chat this over, rather than endlessly typing? Our number is at the bottom of the test website... or perhaps you could let me have yours to call (email me directly via the email address on the site if it's best).thanks, John
  • Hi Neil can I talk to you about this? John
  • Check your email John, I've sent you a test file which hopefully gives you what you are looking for

    Let us know via here if all is good, just so that it keeps Neil in the loop
  • Hi Neil, I think if you revisit my test site, on the home page, you'll see what I'm after, by hovering the mouse across all the page names at the head of the home screen, you'll see they all appear red as hyperlinked. If you click on 'ABOUT', you'll now just get the drop down menu, with all pages on that hyperlinked. This is exactly what I'm after, bar two things!! 1) it would have been good to have a 'hand' symbol when you hover over 'ABOUT' rather than the cursor? and 2) it would be great to have the ABOUT text stay red (to match the maroon red elsewhere, not scarlet) to show you are on the menu (this is less important to me than the 'hand' showing rather than cursor), any thoughts finally on that? , thanks, John
  • Seems like you are now sorted John ;-)

Howdy, Stranger!

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

In this Discussion