I have created a single page site, when menu items are clicked, the page scroll to anchors defined in page. The menus are working fine on large screen (desktop) and when clicked the page scroll to the section, but on small screen (mobile) AMP sidebar menu doesn't close after tapping on a menu item and if you press the close button, then it doesn't go to the section of page that was selected in the menu.
As found at this issue on Github:
amp-sidebar pops the history when it's canceled so the navigation is canceled
it's a known bug with single page anchor navigation, but:
This should be fixed in the next release
the relative fix branch is now (2016-11-30) under review
Related
On my WordPress website I have a main navigation containing anchor links that scroll to different sections of the home page (e.g)
About Us
However when the main navigation links are clicked from sub pages (e.g. if the navigation links are clicked from a page like the below)
http://thisismysite.com/contact-us
it successfully goes back to the home page and scrolls to the correct anchor, but it then jumps to the top of the page when the page loads completely.
Any ideas what can fix this?
I have an administrative page that after login the content does not start with the margin of the menu making the transaction to stay in the right place, this only occurs when you log in and open the page with the menu the first time, it follows what happens:
Today I noticed a small menu in the bottom left of Chrome Inspector. Upon clicking the dots, this menu appears. When you select an option, a tab is open in the bottom of inspector, but nothing changes on the page or in inspector.
Does anyone know what this menu is used for?
You've just discovered like 8 new worlds of DevTools features, my friend.
That whole section is called the Drawer. It's collapsed in your screenshot, which is why it seems like nothing is happening. Press Escape to expand it. You should be able to drag the bar to the right of the Search tab to adjust the Drawer's height.
Each of those menu items represents a different tab in the Drawer.
P.S. the Drawer collapses automatically when you're on the Console panel, if you also have the Console Drawer tab open. Otherwise DevTools would have to make sure that the two UIs stay in sync.
P.P.S. the Drawer should probably auto-expand when you click on a menu item, since you obviously want to use that tab. I think that's fixed in later versions of Chrome but I'll file a bug report if not.
I have this problem with this basic multi-level responsive menu I made while using :hover (I'm not a profesional. I'm just someone who knows some html, css and wants to create a theme for a favourite website).
When using a mobile device (Chrome for Android):
if I tap the second menu entry (I still haven't mod the link for the responsive mode of the first menu "Forums"), the submenu opens just fine
If I tap the third menu entry, its submenu will open, but in the process it will also tap a link inside the submenu.
I pressume it is because the height of the menu container changes when each submenu is opened and when the submenu is opened the tap is still active and it clicks a link of the submenu.
How do I stop that from happening?
This is the website where the theme in construction is: http://etrostruewowdesigncomplete2.esy.es/phpBB3/index.php
The menu itself is still not finished (i have to hide some links in responsive modes and icons). The menu container opens when taping on the search icon.
This the menu. For example, when opening Community's submenu with a tap, the link highlighted is also taped in the process:
Here is a screenshot of the menu on small screen :
I've decided to go with onclick events for the menu. Hover will just not do it.
In this store, if you click on the first two links in the menu, after you scroll down the menu changes: it stays at the top of the visible page with a black background. This way the visitor always have access to the menu.
The squarespace theme I'm using allows this to happen only to these first two pages.
If you enter any other menu link and scroll the page down, you will see that the menu doens't do what it does in the first two pages. If you scroll down, the menu stays at the scrolled part of the page.
I'd like to identify the menu CSS which makes changes it and makes it stay at the top of the page with the black background and apply it to all pages.
I'm having a hard time to identify it using FireBug.
If you need to just identify the stylesheet use "inspect element". Right click and select it.
For CSS to make it stay at the top, I think position:fixed will work.