Jump to content


Photo

Primary menu hidden by sliders in Platform theme after update


Best Answer linkfr , 10 April 2013 - 08:55 AM

Hi everybody!

 

Just a message to keep you informed, problem has been solved, you may take a look at it here (you will see by the way there's a little issue with submenu's transparency at the end).

 

Thanks a lot for all your help and patience!

Go to the full post


  • Please log in to reply
20 replies to this topic

#1 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 03 April 2013 - 06:46 PM

Hi guys,

 

I'm having a problem since i updated Platform theme yesterday, hope you can help me.

 

Primary menu drops down behind the sliders, so it's invisible. I'm using Promotion slider plugin, but problem started after updating the theme.

 

You may take a look at the screenshot here.

 

Any suggestions?



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 April 2013 - 07:34 PM

This is a z-index issue. You’ll need to use Custom CSS (in PageLines > Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug to find the navigation selector you need, please review this entire documentation and follow the instructions: http://support.pagel...ion/custom-css/

 

For help with the z-index property, please see this reference: http://www.w3schools...pos_z-index.asp



#3 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 03 April 2013 - 09:50 PM

Hi Catrina, thanks for your answer.

 

(I forgot to say something:  The menu is indeed hidden by Platform's universal sidebar, where plugin's shortcode is).

 

I guess that's a little bit to complicated for me, i should spend a couple of hours or days in understanding and i'm not even sure i'll get it right.

 

I'll maybe try to find another solution, either adapting the blog's visual design to handle the issue or uploading Platform's previous version.


Edited by linkfr, 03 April 2013 - 10:03 PM.


#4 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 03 April 2013 - 10:18 PM

Wooow....

 

I just uploaded through ftp the previous version of platform, and the problem persists...  Why is that?  Does it mean the problem is not in the theme but somewhere else?


Edited by linkfr, 03 April 2013 - 10:25 PM.


#5 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 April 2013 - 10:36 PM

Hi there, if you updated the plugin or wordpress at the time you updated platform then it could be some of the options in either one had changed.

 

It does look like a z-index issue from the screenshot, so I would think the plugin changed the levels the images display at which has conflicted with the menu drop down etc. Z-index is like a layering system, what goes in front of what etc.



#6 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 03 April 2013 - 11:11 PM

Hi James B, thanks for your answer.

 

Yes, indeed, i bulk updated themes (5) and plugins (about 30) and deleted unused plugins (+200)...

 

Do you think reinstalling platform or, more likely, promotion slider plugin will solve this?

 

I haven't tried it so far because i'm afraid of having to reset the plugin if i do and that would mean +50 slides in 7 blogs.



#7 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 April 2013 - 11:18 PM

I don't think doing that would solve it unless you downgraded to a previous edition of the slider, which could then cause problems with wordpress if it wasn't compatible with the latest edition etc.

 

To edit the z-index of the item isn't to bad, its simply a case of finding the correct number to put in to correct the layering. Example {z-index:30;}

 

All you will to do if find the correct selector for that slider in the css, to do that you'll need to inspect the slider using a web developer tool like firebug. There's a walk through on how to inspect items on http://support.pagel...ion/custom-css/

 

Then its just a case of putting it together with the z-index code above and editing the number until you see the change take affect and the drop down go back to being in front of the slider.



#8 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 04 April 2013 - 02:23 PM

Hi again, indeed i'm quite a beginner (i dont even know why my profile says advanced member).

 

I just tried pasting this: {z-index:30;} and nothing changed after saving.

 

Is there more code i should add or just try to find the right number instead of 30? From 1 to ?? 100?



#9 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 April 2013 - 09:21 PM

Well using an inspector like firebug or chrome developer tool will allow you to see the changes live on the site so you can copy/paste the correct code back when you find the right number. You will need to add additional code prior to that instruction depending on the code the slider is inputting. The slider will have a specific name/class that you can input infront of the z-index code.

 

Examples can be seen on - http://support.pagel...ion/custom-css/



#10 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 05 April 2013 - 02:35 PM

Hi again,

 

I've got this far but the thing is i still don't know what to look at, what to change, how to change it.

 

Here is a firebug screenshot and a the page's code is here.  Am i heading the right way?

 

Plugin author says z index must be set at least to 101.  So so far i pasted this but still no change:

 

 
.promo_slider{
  position:relative;
  z-index:101;
}


#11 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 11:54 PM

That's quite a high index for that, the only thing you can do in that case is try and edit the drop down menu's z-index to be above it. I've put in 102, but you might have to try much higher to get it to show.

 

 
ul.sf-shadow ul.sub-menu, ul.sf-shadow ul.children {
    background: url("images/shadow.png") no-repeat scroll right bottom transparent;
    padding: 0 6px 7px 0;
    z-index: 102;
}


#12 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 06 April 2013 - 08:20 AM

I pasted and saved the exact code in PageLines Settings > Custom Code but nothing changed.  I also tried modifying the z-index number: 102 to 111, 199 to 203, 1000, 2000, but no changes can be seen.  I even tried the code without ul.children in case that might be related to child themes (?) because i never created any.

 

Thanks for your patience.  So far i guess i'm closer to solving it thanks to your help and confirm this is still a high level issue for me.



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 April 2013 - 01:28 PM

Hi,

 

You're making the z-index number higher, which sends things further back.  Lower the number to bring things forward, for example, 102 could go to 90.

 

Here are some helpful sites that explain it further:

http://www.w3schools...pos_z-index.asp - has a testing area for numbers

http://coding.smashi...rehensive-look/ - Everything you need to know about z-index (but didn't know you needed).

 

Since you mention using Platform, I recommend upgrading to PageLines Framework.  Since PlatformPro is deprecated, each update of WordPress is going to cause more problems such as the one you're experiencing. Eventually, there will not be a solution available, so it's better to upgrade now, before you experience problems.



#14 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 07 April 2013 - 01:05 PM

Ok... So far i've understood that the lower z-index is, the further back the element will show. But only if position is set as relative.

 

Plugin's z-index is set to 101 for the slider and 101 for the slider navigation buttons.  Both positions are originally absolute.

 

I set them to relative and played around in slider.css increasing and decreasing z-index so that it is higher or lower than the z-index in the theme's code (PageLines Settings > Custom Code, but wasn't able to change it...

 

 

 

Please help (!).



#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 01:40 PM

May I have a link to the specific page where this problem exists? I'll take a further look.



#16 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 07 April 2013 - 04:10 PM

Hi Rob, thanks!  Sure, you will find it in Pastebin here.

 

(Sorry for not typing the url here).



#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 04:29 PM

Well, I can see the problem, but I can't seem to find the right element to fix.

 

I have tried changing the slider's z-index to 199 from 99, but that's not working. I think you would need to ask the slider's developer what z-index would move his slider back.

 

Also, I think this issue would be resolved when you upgrade to PageLines Framework.

 

I am still looking though, and will report any changes I find.



#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 04:46 PM

Both the submenu and the slider use position: absolute; which, it seems, is forcing the z-index issue.  I've tried changing the menu to position: relative; with a z-index of 1, or even 90.  This then makes the menu fully visible, but pushes the slider further down on the page, below the lowest submenu item, because it's placed on the page inside a text widget, as opposed to being a section.

 

If you upgrade, I suspect that you could use our regular slider, or optionally other sliders we provide to replace this 3rd party product we can't properly support. I know that we have no issues with this in PageLines Frameworks with any of our sliders.



#19 linkfr

linkfr

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 09 April 2013 - 04:41 PM

Ok, thanks, i'll see what i can do.  Two questions before:

 

1/ Just to understand, when you say you've tried or changed this and that, does it mean you modify my blog?  And, in such a case, how is that possible?

 

2/ Which is the file where i can set the menu's position as relative?



#20 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 April 2013 - 09:25 PM

Hi there, yes we can look at your site online and modify the css which renders on the page using firebug or google chrome developer tools. That doesn't affect the site, only the page we're looking at on our machine etc. So we can see the changes but the actual version online remains as it is.

 

You would change the position using css. Any css changes you make you can just copy/paste the code back into the custom code box inside the platform admin area.