Menu underline not showing

[vlad69uk]

Hi,
I’ve been setting up the theme over the past couple of days, all has been going really well.

Today I have noticed that the red underline on the menu doesn’t change when scrolling down the single page. Tapping a menu item works and scrolls the page correctly, any subsequent scrolling leaves the red underunderline under the same menu option.

econd issue, on the single homepage, if I scroll down the sticky menu appears. When I scroll back up, the sticky menu remains and doesn’t display the “get app” button.

It has been working so I suspect it is something I have done. Possibly to do with mal formed divs by using the default editor? I’m not sure what I have done to break this!

Also, I cannot get the site logo to display on screens below 10″. I have uploaded a retina logo as suggested, but still nothing unfortunately.

You can view the temporary site at http://www.form32mobile.co.uk

Thanks
Paul

[livemesh]

In most cases, this is due to Javascript errors. Currently the site is down or probably the URL provided by you is incorrect. Pls check the site once. A temporary login to the site may speed up the resolution. You may post the login as a private reply here. Thanks.

[vlad69uk]

This reply has been marked as private.

[livemesh]

I fixed the issue by specifying an URL for the More menu item with displays a dropdown. The current implementation of the menu requires that you provide a URL for every menu item. Since the More menu link had a blank URL, there was a JS error which lead to this issue.

[vlad69uk]

Hi,
Many thanks for the fast response! Glad it was something simple, and nothing fundamental that was causing the issue.

This does however give us another issue when using the ‘more’ menu on a touchscreen. I removed the url so that tapping the link would open (and keep open) the menu, and not follow a link. Is there a specific url that can be used that will still allow the JS to run correctly, but still allow the menu to be used and display the sub menu until a sub menu link is tapped?

Cheers
Paul

[livemesh]

I inserted the following Custom CSS into Custom CSS tab in theme options panel –

@media only screen and (max-width: 767px) {
#header > .inner { text-align: left;}
#header #site-logo { margin: 0;}
#header #site-logo { width: 220px;}
}

to make the logo align left instead of center for mobile. Pls adjust as per your preference. Thanks.

[livemesh]

I checked your site on my iPad – the More link loads the dropdown but does not lead to the linked page. Which touch device were you testing this? Also, looks like the password was changed and hence I could not test this really. Can you insert # as the URL and see if it is any better? Thanks

[vlad69uk]

Hi,
Putting the # in the menu seems to have resolved the issue.

Many thanks for all your help.

Cheers
Paul

[livemesh]

Cool. Thanks for letting me know. Helps others too if they come across this issue.

[vlad69uk]

Actually, adding the /# has created a minor issue. When you tap on the ‘more’ menu now, the menu stays visible (original problem resolved, thank you!), but the page now jumps back to the top.

We have tested this on two htc phones, two 10″ galaxy tabs, and two Nexus 7 (2013) devices.

I have updated the password to the one I sent you previously. As I said, this is nothing major, so no rush.

Cheers
Paul

[livemesh]

As you indicate, probably this is not a big one unless the jump is distracting since the user wants to navigate anyway from the page. To prevent this behavior there are some suggestions below –

http://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t

I would suggest you try the second option first (inserting ‘#!’ instead of ‘#’) before trying the first one that suggests a Javascript based solution (will need to modify the js/main.js file). The JS solution might cause trouble with some touch devices which may register a click for invoking the dropdown for the menu item. Hope this helps. Thanks.

[livemesh]

The JS code will look like below in your case –

$('li.menu-item-4455 > a').click(function(e) {
     return false; // prevent default click action from happening!
     e.preventDefault(); // same thing as above
});

[Author]

Posts