Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Known Menu Bug? Workaround?


  #1  
Old Oct 13, 2013, 02:12 PM
dabeed
 
28 posts · Nov 2012
Hi All -- I've got a few page menus and one ("Info") has a few submenus. As you can see in the attached screenshot "Info Menu from Welcome," when a visitor views the Info menu from another page, in this case Welcome, the Info menu displays correctly, that is, only the items hovered over get the hover color. But when a visitor is on the Info page, the Info menu is completely filled with the hover color. You can see that in "Info Menu from Info."

I'm controlling this through ATO > Menu 1. I'm using Firefox. Is this a known inconsistency, and is there a workaround?

Many thanks!
Attached Thumbnails
Click image for larger version

Name:	InfoMenuFromWelcome.png
Views:	323
Size:	6.6 KB
ID:	2430  Click image for larger version

Name:	InfoMenuFromInfo.png
Views:	308
Size:	5.2 KB
ID:	2431  
  #2  
Old Oct 13, 2013, 04:26 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
That's a case where I would use Firebug to "fiddle" with the CSS.
__________________
~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 Oct 24, 2013, 03:17 PM
dabeed
 
28 posts · Nov 2012
Thanks lmilesw. I wish I could put this more intelligently, but I have no idea what to do. From Welcome, I can roll over the Info menu and inspect an element with Firebug, say Bio, as in the screenshot, but the resulting information doesn't show me anything about the hover color. And if I inspect this element from the Info menu, it doesn't look any different.

Can anyone point me in the right direction in terms of figuring out 1) where the hover behaviour is stored, 2) why it's different on the local page (Info) vs a different page (Welcom), and 3) how to fix it?

lmilesw, can Firebug be used to actually make changes? Or were you saying to use Firebug to figure out what's happening and then make corresponding changes in Atahualpa's CSS Inserts section or something?

Best,

David
  #4  
Old Oct 27, 2013, 04:31 PM
juggledad's Avatar
juggledad
 
23,649 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
can Firebug be used to actually make changes? Or were you saying to use Firebug to figure out what's happening and then make corresponding changes in Atahualpa's CSS Inserts section or something?
you use Firebug to figure out what CSS to put in the CSS Inserts - FireBug makes temporary changes.
Quote:
Can anyone point me in the right direction in terms of figuring out 1) where the hover behavior is stored, 2) why it's different on the local page (Info) vs a different page (Welcom), and 3) how to fix it?
without a link to the site, exact syntax is impossible. However in general you hav to remember that CSS is 'cascading' so - unless you add different css - child elements get the css applied to the parent.

In this case, you probably set the parent page to something and the child elements get that styling also - you have to shut it off.
__________________
"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 juggledad; Nov 1, 2013 at 07:25 PM.
  #5  
Old Oct 30, 2013, 02:19 PM
dabeed
 
28 posts · Nov 2012
Hi All -- I spent a lot of time digging around with Firebug on this, and then a friend hit me with a great workaround: Set the parent page ("Info") to have no content, and move the content that was there to a child page.

ATO > Menu 1 > Don't link first level parent items in Page Menu Bar? > Yes.

If I ever NEED to have content on parent pages, I'll revisit this, but for now, this does the trick.
  #6  
Old Nov 1, 2013, 08:14 AM
dabeed
 
28 posts · Nov 2012
I started digging into this again, encouraged by some progress I made using Firebug on another front (I found the selector for the submenu, ul.rMenu-ver).

But I looked around and it looks like the issue is present not just for me but whenever the default menu is used. I looked through the Showing Off section and this site has it too: www.stevesamps.co.uk > Look how the rollovers work on the Blog menu from Home, versus the Blog menu from Blog.

It's also in the preview of Atahualpa on Wordpress.Org: http://wordpress.org/themes/atahualpa > Look at the Parent Page menu from Home, versus the Parent Page menu from Parent Page. This is very subtle because there’s only one child page and the colors are very similar. But it’s the same issue.

So, it would be great if this were added to any bug lists that may be flying around. I realize this is minor but it breaks the continuity of the interface.

Meanwhile, in terms of an insert/patch:

It seems to me that what's happening is that when on the parent page, it shows the child links in the menu as "current." I'm using the word "current" from ATO > Menu 1 > "Background color for menu items in hover and current state."

My best guess as to how the “current” state is expressed in the CSS is with li.current-menu-item. (I tested it by adding an insert to style this yellow with !important but it had no effect.)

But we don’t want to change the style of this element, we want to make sure that the child menu elements aren’t defined as “current” on the parent page. As Juggledad says we need to turn that off.

Any ideas would be much appreciated! I'm learning but I'm way over my head here.
  #7  
Old Nov 1, 2013, 07:46 PM
juggledad's Avatar
juggledad
 
23,649 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
this is not a bug, the CSS cascades. In your first post, you have the current page displaying as red and probably the parent color set to red and the hover state set to red. This is why welcome is red and when you hover over bio, it is red and it's parent is red.

Now when you click on info it is now the current page so it is red and (without other css to change it) the color cascades down to it's children, so servces, bio and resume all get the parents color red.

If you want it to work different you need to add more css to change the child's color to something else - this new css you have to code (it's not part of teh imbedded theme options) you would put in the CSS Inserts option.

The menu CSS is the most complex CSS for the theme - play with the css (see Juggledad's colored menu cheat sheet) and take a CSS tutorial class so you get an idea of what csacading does.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Nov 1, 2013, 09:37 PM
dabeed
 
28 posts · Nov 2012
Juggledad I'm surprised. So this behavior is by design?

Quote:
But I looked around and it looks like the issue is present not just for me but whenever the default menu is used. I looked through the Showing Off section and this site has it too: www.stevesamps.co.uk > Look how the rollovers work on the Blog menu from Home, versus the Blog menu from Blog.

It's also in the preview of Atahualpa on Wordpress.Org: http://wordpress.org/themes/atahualpa > Look at the Parent Page menu from Home, versus the Parent Page menu from Parent Page. This is very subtle because there’s only one child page and the colors are very similar. But it’s the same issue.
Don't you think the menu should behave the same way, viewed from any page? Just about every other menu I've seen behaves consistently. It seems to be just the default Atahualpa menu that has this inconsistency. But really, that behavior is an intended part of the theme?
  #9  
Old Nov 2, 2013, 03:12 AM
juggledad's Avatar
juggledad
 
23,649 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Once again it is how the CSS works. You are free to override this styling if you wish. The menu CSS is based on the ruthsarian design (http://s8.org/ruthsarian/layouts/rMenu/)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 2, 2013, 12:53 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You can also avoid that behavior by having the top menu tab not link to a page which is my preferred method of building menus with drop downs. I make the top menu item as a link with just # in the address field.
__________________
~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.
  #11  
Old Nov 9, 2013, 08:50 AM
dabeed
 
28 posts · Nov 2012
Thank you, Larry, yes, I was using that as the workaround.

Very happy to say I found a solution, thanks to Tim on this thread: http://forum.bytesforall.com/showthr...ht+parent+menu

Modified to address menu1, and my current colors, this works! However, I'm sure there's some redundancy here, since I added some code on top of Tim's code (because the "current" styling wasn't working), and there's a lot of !important flying around, so I might try to streamline this a bit, but again, it works.

Code:
#menu1 ul.rMenu li a:link,
#menu1 ul.rMenu li a:visited,  
#menu1 ul.rMenu li a:active,
#menu1 ul.rMenu li {
    background-color: #A8ABB5 !important;
    color: #777777 !important;
} /* base bg's and colors for everything except hover rules */

#menu1 ul.rMenu li a:hover {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* hover rules */

#menu1 ul.rMenu li.current-menu-item a  {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* special rule for the currently selected items */

div#menu1 ul.rMenu li.current-menu-item > a:link,
div#menu1 ul.rMenu li.current-menu-item > a:active,
div#menu1 ul.rMenu li.current-menu-item > a:hover,
div#menu1 ul.rMenu li.current-menu-item > a:visited,
div#menu1 ul.rMenu li.current_page_item > a:link,
div#menu1 ul.rMenu li.current_page_item > a:active,
div#menu1 ul.rMenu li.current_page_item > a:hover,
div#menu1 ul.rMenu li.current_page_item > a:visited {
    background-color: #04644B !important;
    color: #FFFFFF !important;
    } /* "current" page and hover, first part old version, taken from css.php, and swapping out the php for local colors, and adding !important */

#menu1 ul.rMenu li.current-menu-item ul li a {
    background-color: #A8ABB5 !important;
    color: #777777 !important;
} /* special rule for children in case parent element is selected */

#menu1 ul.rMenu li.current-menu-item ul li a:hover {
    background-color: #04644B !important;
    color: #FFFFFF !important;
} /* redo so that hover rules "stick" */

Bookmarks

Tags
menu 1

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem including subtemplates from virtual templates: workaround included marklevine Montezuma Theme 4 Aug 15, 2013 03:12 PM
[SOLVED] Workaround for PHP: <?php the_permalink() ?> damian New Versions, & Updating 6 Oct 25, 2011 02:15 PM
[SOLVED] Bug with WP-Email Plugin – Workaround? damian Plugins & Atahualpa 2 Apr 18, 2011 03:26 PM
[SOLVED] Buddypress Workaround for Single WP Install? Rashell Sidebars & Widgets 1 Mar 12, 2010 11:20 AM
WP-PostViews workaround? perdox808 Post-Kicker, -Byline & -Footer 0 Apr 10, 2009 09:57 AM


All times are GMT -6. The time now is 09:26 PM.


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