Strange behaviour of mobile pop up menu

With Gary's help, I created a pop up menu - https://www.talkgraphics.com/showthr...own-menu-width - for the mobile version of a client's site.
It works perfectly as long as the vertical window scroll bar in any browser is at the top of the page - but as soon as you have to scroll down the page, the menu stops working - the pop up shows and the relevant page gets highlighted - but it simply wont go to that page.
If you scroll to the top of the page - the menu works again.
Any ideas gentlemen?

http://www.logostore.co.za

Did you use the Nav Bar feature to create the Menu?

The text on the menu is very small in my iPhone. If could be about twice that size.

I tried going to the food Menu page and even sitting next to my router with WiFi enabled on my phone the page takes a long time to load.

Hi Gary,
No - I created the menu from scratch as per your suggestion here - https://www.talkgraphics.com/showthr...own-menu-width
I will be making the drop down larger, but what I want to know is if you experienced the menu not working if you scroll down a page and then click an item on the menu.

Yes, I can reproduce that behavior. Offhand I wouldn't know what's causing it so perhaps you could post your .web/.xar file.

Quote:

---

Originally Posted by Boy

Yes, I can reproduce that behavior. Offhand I wouldn't know what's causing it so perhaps you could post your .web/.xar file.

---

Hi Boy - thanks for your help in advance.
I've created a copy of the site and then deleted the main variant and a few pages to make the file size smaller.

The problem still exists when previewing the site in Chrome and Opera, but works fine in Explorer and Firefox.

You'll see an additional drop down menu on the left - I just created this conventionally by deleting all the menu items except the home page and then re -adding the items and links to the pages. It works fine but I really prefer the look of Gary's version.

Attachment 118738

EDIT:
I just created a really simple test site from scratch - same behaviour - if you scroll the page in Firefox and Explorer and then click on the menu it works fine - but in Chrome and Opera, no go!

Attachment 118739

I think it is the white box you made sticky at the top of the pages.

Even removing that doesn't seem to make your version of Gary's hamburger work.

I have added in how I would tackle such a menu using Xara's NavBar to give us a starting point for further discussion.

Attachment 118740

Acorn

Thanks for the reply Acorn.
I also created a menu using Xaras nav bar and it works fine.
I just really prefer the look of Gary's menu and find it very frustrating that in Explorer and Firefox it works fine after scrolling, but in Chrome and Opera it doesn't. Is it a case of various browsers handling WDP's code differently?

Quote:

---

Originally Posted by letsgofishing

Thanks for the reply Acorn.
I also created a menu using Xaras nav bar and it works fine.
I just really prefer the look of Gary's menu and find it very frustrating that in Explorer and Firefox it works fine after scrolling, but in Chrome and Opera it doesn't. Is it a case of various browsers handling WDP's code differently?

---

There should be no difference. I'm busy but I will try and build a version later on.

Acorn

Quote:

---

Originally Posted by Acorn

There should be no difference. I'm busy but I will try and build a version later on.

Acorn

---

Many thanks for offering - but please put this on your back burner, don't want to hassle you.
I will use the WDP single button menu for the mean time

Quote:

---

Originally Posted by letsgofishing

Many thanks for offering - but please put this on your back burner, don't want to hassle you.
I will use the WDP single button menu for the mean time

---

The problem with my attached, and Gary's, is the setting of a Sticky for any part of the menu destroys the mouseover and pop-ups.

Overall, it is too much of a far using Xara's NavBar system or rolling your own: Attachment 118744.

I far prefer the use of a CSS menu instead; far, far more control.

Acorn

Here is a CSS Submenu mockup that took minutes to set up the menu items (Home, Cyan, Magenta) are the only working links.
A straight copy from: https://css-tricks.com/targetting-me...avigation-bar/.

The menu bar is Sticky at Top and repeats on all pages.

Attachment 118745

Acorn

I noticed that at some point (some of) the submenus are no longer selectable as they disappear when moving down the cursor.

Quote:

---

Originally Posted by Boy

I noticed that at some point (some of) the submenus are no longer selectable as they disappear when moving down the cursor.

---

Boy, thank you for advising. I think this is the speed you of reach the submenu; there is a small gap so if moving slowly, it closes.
I didn't have much time to check everything over but Xara's NavBar sometimes does the same.

Acorn

Ah, yes, moving the cursor swiftly gives better results but at times it's still a hit and miss operation

Quote:

---

Originally Posted by Boy

Ah, yes, moving the cursor swiftly gives better results but at times it's still a hit and miss operation

---

Thanks for your patience Boy.

Got there! In the Head code, the following selector needs to be changed:

.nav > li li:hover > ul {
left: 100%;
border-left: 1px solid #fff;
top: -1px;
}

Acorn

Quote:

---

Originally Posted by Acorn

The problem with my attached, and Gary's, is the setting of a Sticky for any part of the menu destroys the mouseover and pop-ups.

Overall, it is too much of a far using Xara's NavBar system or rolling your own: Attachment 118744.

I far prefer the use of a CSS menu instead; far, far more control.

Acorn

---

Many thanks Acorn! I've been playing around and yes, it's definitely the white rectangle set to sticky that is causing the problem.
I'm afraid writing code is beyond my abilities ;)
It would be really nice if xara could fix this as it's not uncommon to have a nav bar that is always visible when scrolling a page...

Quote:

---

Originally Posted by Acorn

Here is a CSS Submenu mockup that took minutes to set up the menu items (Home, Cyan, Magenta) are the only working links.
A straight copy from: https://css-tricks.com/targetting-me...avigation-bar/.

The menu bar is Sticky at Top and repeats on all pages.

Attachment 118745

Acorn

---

Many thanks Acorn!

Quote:

---

Originally Posted by Acorn

.nav > li li:hover > ul {
left: 100%;
border-left: 1px solid #fff;
top: -1px;
}

---

I copied & pasted the code (and hit 'OK' and 'Apply') but didn't notice any different behavior.