I have a drop down menu on this development Wordpress site: http://zap2dev.redzephyr.biz/ the mobile menu appears to be working fine however upon pressing the mobile menu icon the menu displays and promptly the page begins reloading. Obviously on reload the mobile menu is collapsed again so begins the vicious cycle.
Any ideas what could be causing the page to reload?
Any help would be greatly appreciated.
Change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle">
then update your css
nav#mobile .navicon{
cursor:pointer;
}
Try making your toggle not a link and instead a div. Otherwise with javascript assign on click or touch to prevent.default which would cause the browser from trying to open the link which doesn't have an assigned href and reloads the page.
Related
In my client's website, the navigation links are used for anchor scrolling and also for internal pages. When I click a link for an internal page, obviously the menu disappears once the new page is loaded. However, when I click a link for an anchor, it scrolls to the desired page section, but the menu won't toggle. It's confusing because it seems like nothing happened and the user can't see the content because the menu is hiding it.
How can I toggle the mobile menu after clicking a link for an anchor?
I've tried this approach, but nothing happened:
<script>
$('#menu-mobile-open a').click(function (e) {
$('#menu-mobile-open').collapse('toggle');
});
</script>
The website is: www.amgeventoss.com.br
Thank you!
i have just gone through you site and found this solution is working
jQuery(document).ready(function(){
jQuery('.menu-mobile .menu-link').on('click',function() {
jQuery('#menu-mobile-close').click();
});
});
just add this to your js and it should work like charm
I am working on a website and I have a design issue coming up. I have a navigation bar where 3 dropdowns are present. Whenever I click on the dropdown and select an item, the page completely reloads and the whole structure of webpage fully refreshes and need to scroll down again and again for checking that clicked option. Is there something that can stop it from reloading each time and when a menu item is clicked the page stays right at there?
Don't use About
Use About
If you point the href to an html file then it will reload the page but if you use a section's id then it will go to that section of the page without reloading.
I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.
I`ve made this website http://intelmarketing.mk/demos/mediahuset/ and I need help with the menu (toogle tabs).
The idea is when a menu item is clicked the page to scroll down and open the toogle coresponding the menu item. I taught that it can be done with
Take me to Link 1
<a id="link1">Link 1</a>
Made the headers to be images with id's and clicking on the menu scrolls down to the toogle, but not opening.
Also when other menu item is clicked (or tab) the already opened toogle needs to close.
Any help will be welcomed.
Best regards, Nikola.
SITE:
http://intelmarketing.mk/demos/mediahuset/
Update**
The site is build on wordpress platform, and for the toogle tabs I use whistle plugin.
wordpress.org/plugins/whistles/
The menu are simple images.
On click of "our work" you wish that page should scroll down and a tab should slide down. Presently the page is scrolling down, however tab is not sliding. Am I correct?
You could add two events to your navigation bar tabs 1) to scroll down 2)to slide tab
2nd event is slideToggle() that you're already using
This is not a clean way, but it should work.
Cheers
I need help regarding mobile website on iPhone. I have implemented slide panel jquery plugin with bootstrap. The left-slide panel contains category links, positioned absolutely below the homepage. When I click the navigation button to open the slide-panel opens but the link below in slide-panel also get triggered. As a result page redirects to link after opening the slide-panel. Seeking for help...
Thanks