- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hey everyone,
I transformed an existing Weebly website to a one-page design for a client. This website works fine, but on mobile the navigation is bad. At first the menu didn't work at all on the homepage, but on other pages it did. Now it does work.
The new problem is: When I press a menu item, it scrolls to the right section, but once I tap the page to hide the menu, it scrolls back up all the way. This makes the navigation menu useless. I also can't find a way to make the mobile navbar sticky.
Help is greatly appreciated. I'm using the Legacy. theme.
The website is: amsterdamsbewind(dot)nl
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hey @Adam, thanks for your suggestion. Sadly, it doesn't work. It happens on every mobile theme I pick. I've used the following Javascript code to make the page scroll using the anchor links, maybe that causes the issue. I've tried altering and removing the code with no luck.
<script> // Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } }); </script>
I'm starting to think this is a Weebly-issue. I've implemented the same code on other HTML/CSS one-page websites and that works like it should. I can't figure out what the problem might be.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
I would also like to make the mobile header sticky, but there's no way to edit the mobile theme. How can this be done? @Adam
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Weebly employees are not able to assist with custom code, but another user on here might be able to help you out. It might also be easier to change the theme to a standard Weebly theme that includes a sticky header, however, I don't believe any of the themes will display a sticky header on mobile. All of the responsive themes will change to a hamburger mobile menu depending on screen size.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report