Horizontal menu / mouseover focus issue / Firefox

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
tinhornpoppy
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Nov 06, 2012 9:33 am

Horizontal menu / mouseover focus issue / Firefox

Post by tinhornpoppy » Tue Nov 06, 2012 9:41 am

Hi!

I'am currently working on a website for a friend of mine and i have some issues with the submenu selection. I'am using the "protostar" theme and i made the menu horizontal using the 'nav-pills' setting.

http://www.deweerd.me/berndvanhoorn/

If i mouse over on a menu item which has submenu's, i have a hard time to pull the mouse down to actually select a item in the submenu. A lot of times, when i move the mouse a bit down towards that submenu item, i lose focus and the submenu pops away. The area in which is holds the focus for the submenu seems to be too small i think?

Is there any way i can make this area a bit "bigger" so the submenu won't pop away due lost focus?

It's hard to describe :) Many thanks.

Dennis

numiah
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Tue Oct 30, 2012 8:11 pm

Re: Horizontal menu / mouseover focus issue / Firefox

Post by numiah » Sat Nov 10, 2012 7:41 am

I have the exact same issue with my sub menu.
On a mobile device it doesn't work at all.
It shows, but you can't select a sub.

tonicopi
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Thu Sep 18, 2008 11:07 pm
Location: Vicenza - Italy
Contact:

Re: Horizontal menu / mouseover focus issue / Firefox

Post by tonicopi » Sat Nov 10, 2012 1:13 pm

It 's true! The whole world has this problem and there have already been two updates joomla 3 and still has not been resolved!!!

BizCentric
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Wed Apr 25, 2012 6:53 pm

Re: Horizontal menu / mouseover focus issue / Firefox

Post by BizCentric » Sat Dec 08, 2012 10:15 am

I know the problem you're speaking of. This has to do with an effect called a "mouse-over". Basically it is a CSS effect.

You can check the template.css file in the protostar template and look for the mouse-over effect and edit it to increase the size of the mouse-over.

I'm not sure if I should note this in the forum to have it fixed, but I will check if it's already been listed.

budiperkasa
Joomla! Intern
Joomla! Intern
Posts: 84
Joined: Sat Apr 21, 2012 7:02 am
Location: Indonesia
Contact:

Re: Horizontal menu / mouseover focus issue / Firefox

Post by budiperkasa » Fri Dec 14, 2012 7:50 am

numiah wrote:I have the exact same issue with my sub menu.
On a mobile device it doesn't work at all.
It shows, but you can't select a sub.
After upgrade Mozilla Firefox to 15.0.1, that issue was gone. Perhaps that's why when I gave a test on the Chrome everything is fine.

christoa66
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Wed Oct 19, 2005 8:17 am

Re: Horizontal menu / mouseover focus issue / Firefox

Post by christoa66 » Mon Jan 14, 2013 1:25 am

Hello, and Happy New Year,

I have the same issue with protostar on Joomla! 3.0.2 Stable.
The sub-menu works well with Chromium 18.0.1025.168 (linux) and Opera 12.11 (linux) but not with Firefox version 15.0.1 (linux).
Looking with Firebug, I've just found that for ".navigation .nav-child" putting "margin-top" at no more than 1.7px (or no more than 1.708px if you want 3 digits after the "." - but 1.7px is perhaps a safer bet...) seems to solve the problem for me. On your website also (Firebug / Firefox version 15.0.1 (linux)).
This change can be applied to all browsers or only to Firefox with a "hack".

BUT I still have one problem, for me this sub-menu only appears after having clicked on its parent - in the Main Menu - that is a menu link to the articles (blog view) of a category. I am able to see the sub-menu only when on this page.
STRANGE
(By the way, I've looked quickly but it seems that for instance I can't use "#" anymore to make the parent of the sub-menu not clickable if needed, I am sent to a page with a list of all categories if I remember well. Perhaps there is an option for that).

If anybody knows where the problem comes from. I don't know for the moment why it's not appearing automatically on all pages.
{solved}The solution is where it has always been, in the main menu module (that I had renamed).{/solved}

Thanks in advance,
Chris

Clive Middleton
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Mar 14, 2014 9:06 pm

Re: Horizontal menu / mouseover focus issue / Firefox

Post by Clive Middleton » Fri Mar 14, 2014 9:19 pm

Assuming for margin-top fix above I need to modify some actual files within Joomla rather than in the Administrator configuration.

Having never done this before, I need some guidance on where to modify the above files.

Thank you

User avatar
Zemplate
Joomla! Ace
Joomla! Ace
Posts: 1389
Joined: Tue Aug 13, 2013 5:55 pm
Location: Colorado
Contact:

Re: Horizontal menu / mouseover focus issue / Firefox

Post by Zemplate » Sat Mar 15, 2014 3:13 pm

I agree that this is likely being caused by the margin issue. You are dragging the mouse down over a space between the two menus and it considers it a mouse out event.

In Protostar, the margin is due to styling in the template.css as below:

.navigation .nav-child {margin: 2px 0 0;}

In your custom stylesheet - which should load after the template.css put this.

.navigation .nav-child {margin: 0}

You shouldn't edit the template.css, as it could be overwritten with an upgrade (Plus it is extremely long - and you may not remember all the changes that you made to it, or where)

See if this helps.

christoa66
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Wed Oct 19, 2005 8:17 am

Re: Horizontal menu / mouseover focus issue / Firefox

Post by christoa66 » Mon Mar 17, 2014 4:51 pm

You could make a copy of the Protostar template in the admin, then rename and activate it. But you wouldn't have some updates/upgrades or would have to update files manually.

With an update of the protostar template, if a custom css exists the same problem could occur, the file pointing to the custom css could be overwritten.

A(nother) simple solution is to add all your custom css at the end of template.css.
/* YOUR CUSTOM CSS */
.....

You remember what you changed, the css rules you overwrote or added, you can comment and organize your code, etc.
If template.css is overwritten it's just a matter of pasting back your custom css at the end of the file. If possible via FTP or SFTP and a text editor.

And, of course, it is always good to have access to copies of your css files (and to backups of the entire website).

I just continue to maintain some Joomla! websites. But now I've used ImpressPages CMS for my last 2 websites. (I almost used Concrete5 or Contao). And I will perhaps also use Processwire, and other ones, in the future.

There are also more and more interesting and easy-to-use flat-file (or sqlite) CMSs that are easier to backup/restore and update/upgrade than SQL CMSs.

Good continuation

MOB_
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Mon Jun 02, 2014 9:53 pm

Re: Horizontal menu / mouseover focus issue / Firefox

Post by MOB_ » Mon Mar 09, 2015 1:22 am

Zemplate wrote:In Protostar, the margin is due to styling in the template.css as below:

Code: Select all

.navigation .nav-child {margin: 2px 0 0;}
In your custom stylesheet - which should load after the template.css put this.

Code: Select all

.navigation .nav-child {margin: 0}
Thanks for this. I was plagued with this issue for a year. I hope your edit is looked at by the developers. They really need to fix this so it becomes the default.

Now how to make it stayed hover (using submenus) with a smartphone? That's the next fix. :)

User avatar
Zemplate
Joomla! Ace
Joomla! Ace
Posts: 1389
Joined: Tue Aug 13, 2013 5:55 pm
Location: Colorado
Contact:

Re: Horizontal menu / mouseover focus issue / Firefox

Post by Zemplate » Mon Mar 09, 2015 3:46 am

I think that the font-size or font-family may mess this up - not sure.

christoa66 is correct that if you upgrade Joomla, it will overwrite some of these files in Protostar and you have to redo the changes when you upgrade. Keep a log of your changes, or put the css edits at the end of template.css or create a custom stylesheet and add the link back into the index.php. You can also copy and rename the template, and it won't get overwritten (it also does not get upgraded).

Good luck.

User avatar
BeauSanders
Joomla! Intern
Joomla! Intern
Posts: 55
Joined: Tue Apr 17, 2007 6:47 pm
Location: South Carolina
Contact:

Re: Horizontal menu / mouseover focus issue / Firefox

Post by BeauSanders » Mon Mar 30, 2015 7:21 pm

Zemplate...thank you so much for this css adjustment. I use Protostar on a number of sites and this problem has been bugging me for months. This fix. works great.

Search term: change joomla 3 protostar submenu hover

-Beau

https://beausanders.org


Locked

Return to “Templates for Joomla! 3.x”