Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Page Menu drop down disappearing behind embedded pdf AND second level not cl


  #1  
Old Sep 9, 2011, 03:56 PM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
[SOLVED] Page Menu drop down disappearing behind embedded pdf AND second level not cl

Hello there!!

Atahualpa 3.6.7 and WordPress 3.2.1. Have applied all 4 bug fixes

On my local dev test site (so no URL, but I have a screenshot..)
My page menu (custom WP menu) disappears behind an embedded PDF. I have read the threads I could find about embedded content and page menus disappearing behind it, but none of the fixes work for me. Having said that, none of the previous problems were with a PDF, the were with either Flash or embedded YouTube.
I tried this in my CSS/inserts :
Code:
ul.rMenu li:hover	{
z-index: 99999!important;		
}
and tried using different variations of adding
Code:
<param name="WMode" value="transparent"></param>
before my embed code or
Code:
wmode="transparent"
in it, but to no avail. on this screenshot here: http://mafgirl.com/images/Ryebrook-menu.jpg I have used this code:
Code:
<center><param name="WMode" value="transparent"></param><embed src="/uploads/Aesthetic-Reception.pdf" width="900" height="1230" wmode="transparent"></center>
and the above CSS insert, but as you can see the menu is still disappearing behind the pdf...

My second issue is the sub menus not 'touching' and therefore I cannot click it: it disappears before I can hover over it. I have tried several things in CSS inserts such as
Quote:
margin-top:0px!important;
as well as
Code:
margin-left: 0px; or margin-left: -20px;
It initially started when I had my menu as %page-right, but then changed it to %pages and the problem still occurs.. Anyone any idea how I can fix these issues?

Thanks for reading!
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Jan 19, 2012 at 09:22 AM.
  #2  
Old Sep 9, 2011, 11:33 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Not sure if this is the issue but you need a space before the !important. The code you posted has no space but perhaps that was a typo.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Sep 11, 2011, 02:25 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
Not sure if this is the issue but you need a space before the !important. The code you posted has no space but perhaps that was a typo.
Thanks Larry, I did indeed forget the space. however, the result is no different than the screenshot I posted.. Any other ideas to get the menu showing on top of the embedded pdf and to get the drop down menu to touch so it can be clicked on - rather than disappearing when trying to hover over it?
I'll try to find some time tomorrow to put the site on my online test environment so you can see for yourself what I mean, as sometimes screenshots do not always paint a clear picture..
__________________
my website www.marolinedesign.com
  #4  
Old Sep 11, 2011, 04:01 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
without seeing the site I can't point to a solution.

Here is what I would do:
1) view the site and then view the source. Now copy the source to a file and save it with '.html' as the extension
2) open that file in your browser, you should see the page
3) now start removing anything that is not needed, the footer, sidebars any CSS not needed. do a little at a time and hit save and refresh the page


eventually you should have it to the point where you can determine what is causing the issue
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Sep 11, 2011 at 01:54 PM.
  #5  
Old Sep 11, 2011, 05:45 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by juggledad
...Here's what I would do ...eventually you should have it to the point where you can determine what is causing the issue
Thank you Juggledad! I've never tried that before, but it sounds like a GREAT idea! Thank you for teaching me something new today :-) !! Ill give that a go today on my way home. If I can't figure it out, then Tomo at some point I will put the site online. Perhaps you would be better spotting the problem.

Thanks again to both of you, you never fail to come to my aid :-D
__________________
my website www.marolinedesign.com
  #6  
Old Sep 12, 2011, 07:50 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Hello Juggledad,

Thank you so much for your suggestion, it has helped me a great deal and I managed to isolate both problems, although only solve one:

Where the sub menu levels were not touching, I have managed to change my code to this:

Code:
/* Top level menu outside margins (position of menu) */
div#menu1{ border:none !important; padding-left:20px; margin-bottom:5px}

/* Top level menu inside margins (position of text within menu item) */
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active{
margin-left:10px;
margin-right:5px;
margin-top:0px; 
border:none !important;}

/* Sub level menu outside margin (position of menu) and borders */
div#menu1 ul.rMenu li li, 
div#menu1 ul.rMenu li, 
div#menu1 ul.rMenu li a
 { border: 1px solid white; margin-left:-12px; }
and it now works beautifully. Hopefully the above code will be useful to others trying to fix the same problem

I have not yet got a solution of the disappearing of the menu, but I HAVE found out what is causing it , and that is the CSS for my menu shape:

Code:
/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius: 128em 8em;
-khtml-border-radius:  128em 8em;
-webkit-border-radius: 128em 8em;
border-radius:  128em 8em;
}
If I deleted the above code, making the menu items 'normal' with straight corners OR changed it back to rounded corners using the below code:
Code:
/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
}
It would NOT disappear behind the menu and work as intended.. However, as the menu shape is part of the design of the website, I'd like to find a way to make

it work.
So I tried to convert the 'em' to 'px' to no avail (still disappearing behind pdf):
Code:
/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius: 21px 2px;
-khtml-border-radius:  21px 2px;
-webkit-border-radius: 21px 2px;
border-radius:  21px 2px;
}
So I tried to divide the radius to bottom-left/top-right/bottom-right/top-left etc - it did not disappear behind the pdf, but it also didn't create any shape (just plain rectangle) so perhaps I used the coding wrongly..?:

Code:
/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius-topleft, -moz-border-radius-bottomright  : 4px;
-moz-border-radius-topright, -moz-border-radius-bottomleft: 42px;
-khtml-border-radius-top-left, -khtml-border-radius-bottom-right:  4px;
-khtml-border-radius-top-right, -khtml-border-radius-bottom-left:  42px;
-webkit-border-top-left-radius,-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius,-webkit-border-bottom-left-radius: 42px;
border-top-left-radius, border-bottom-right-radius:  4px;
border-top-right-radius, border-bottom-left-radius:  42px;
}
Have you got any idea how to fix this Juggledad? or Larry? or anyone else for that matter

Thanks for reading


PS will post a link to the live website tonight, I have not managed to upload all the files just yet
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Sep 12, 2011 at 07:51 AM. Reason: added PS

Bookmarks

Tags
page menu disappear embed

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Navigation menu disappearing behind embedded YouTube videos on page Eric Bobrow Page & Category Menu Bars 8 May 25, 2011 06:27 AM
BUG: Menu and right drop out menus disappearing when above headline of page extremecarver New Versions, & Updating 8 May 10, 2011 04:04 AM
Help in Multi Level Categories/Drop Down Menu ishfaqqadir.lhr Header configuration & styling 1 Apr 30, 2011 05:07 AM
[SOLVED] Drop down menus disappearing because of a Flash object ChuckMunson Page & Category Menu Bars 15 Dec 25, 2010 05:08 PM
[SOLVED] Page Menu Bar - I want some drop downs to be clickable, and one or two to no shbaxt Page & Category Menu Bars 2 Aug 3, 2010 01:32 PM


All times are GMT -6. The time now is 08:14 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.