Jump to content


Photo

finicky function of main nav and dropdowns which disappear on people


  • Please log in to reply
4 replies to this topic

#1 seedprograms

seedprograms

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 26 June 2012 - 03:23 PM

Hello wonderful helpers,

This question has been asked before as it seems to impact many users, and the issue solved by some, but I can not see a solution for me in all my reading. Somebody who seemed expert on the Wordpress forum spent some time on it and gave up. First I want to say that any advice you give me (for which I am extremely thankful) - should be as if you are explaining them to your grandma. Because I have never done any web work before until this site and am only slightly more familiar with this than your grandma is.

I am using the "platform" free theme. The site in development stage is seedprograms.org/build.

The issue is only in Firefox or Chrome. The dropdown menus disappear on your way down with your cursor, sometimes. This appears as "flickering" or jumpiness to some users. In googling the forums I see it is common for the helper to not see the problem. I think people who work on the web all day are accustomed to compensate for finicky navigation, whereas occasional users who have tried the site in development stage say "the menus don't work!" So here is my tip: you are more likely to see this if you zoom in on the browser in Firefox or Chrome and move slowly down from the main nav to the dropdowns because the area that creates a problem if your cursor hits it is only a small number of pixels, maybe 1.

Not in IE. I think there is some kind of fix in place for IE that essentially breaks things in firefox and chrome. Just a theory. Again, seedprograms.org/build - try any dropdown menu.

The diagnosis I have done by using the "inspect" function in Firefox and causing the problem in slow motion is this:

-when your cursor moves from the main nav down toward the dropdowns, the problem arises when it hits an area called div#nav_row.main_nav.fix along the way.

When you hit this area and continue downward, your connection to menu navigation has been broken and you end up in div.mcolumn-pad with the dropdown having disappeared.

As you all know the dropdowns are already position: relative with a z-index of 28. I have really not customized anything that should impact this layout. My messing with the code has been minimal, in part because I don't know how, and in part because there is a big fat warning at the top of styles.css saying not to change anything there but I can't for the life of me figure out where else one would change most things.

On this forum when this has been raised in the past the main thing the experts say when somebody has this problem is, disable all your plugins and see if that fixes it and if so bring them back one by one. Please do not give me that advice as I have done this and it didn't help.

#2 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 26 June 2012 - 05:24 PM

I don't have any hover issues in FF for Mac but you can try to apply some custom css to the subnav, adding some negative top margin.

#3 seedprograms

seedprograms

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 26 June 2012 - 05:50 PM

Hi simple_mama. Would you be willing to walk me step by step through how to do that and read the below and see if you can answer a followup question? 1) followup question If I am reading you correctly, I think you are saying this will extend the top edges of the dropdown menu area to where they will "cover" the problem area that is causing the losing of the link. However, won't it have the same effect on the 2nd and 3rd menus in the dropdown to where they will then oddly overlap the one just above them? 2) why I don't know what to do I can probably google around to figure out how to add negative top margin because this stuff is fairly easy to teach oneself. However, I am intimidated by the fact that the style.css code has a big warning from Pagelines on top of it saying "don't make changes here" but I don't understand where to make changes. When I go to the editor from Wordpress, which menu am I looking at to find the subnav where I would add custom css? Thanks so much, Peter

#4 seedprograms

seedprograms

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 26 June 2012 - 06:30 PM

Hi again,
I've played around since you wrote. I couldn't figure out your suggested fix but I ran with the idea of adding margin and did it on the last line here which seemed to fix it:
.main_nav li a{
padding: 10px 15px 10px;
text-decoration: none;
display: block;
border: 1px solid transparent;
border-bottom:none;
margin-bottom: 3px;

However I still have the question that I don't understand this. Where was I to make the change if not in style.css?

DO NOT CUSTOMIZE THIS FILE USE BASE CHILD THEME OR SETTINGS
- Customization CSS in PageLines Themes
- Customize PageLines themes by adding CSS in the theme settings or in the Base child theme (w Pro)
- Don't add it here; as it will either get overwritten by updates, or prevent you from updating at all
- (Trust us on this one!)


#5 Rob

Rob

    One Smart Egg

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

Posted 26 June 2012 - 09:10 PM

You can use the PageLines Customize plugin or, if you don't have that yet, go to Dashboard > PageLines > Settings and use Custom Code > CSS Rules. I'm not sure the free edition has this, but if it doesn't try the PageLines Customize plugin found in the Store.