-
Posts
-
Hi!
I’m trying to make a menu for a site with one of the pages with anchors so they are linked to different sections on that page. The design is made of several color sections that are different from desktop to mobile. I then hide the color sections that I don’t want to be shown for the correct screen sizes. Unfortunately when a color section is hidden, so is the ID I try to link to in the menu. So it works fine on the desktop but not on mobile since those color sections are hidden. I tried to use a code block in those places but since that makes a large white space and it’s not an option. How is one going about to make a one page design with anchors in a case like this?Regards,
RogerHey Roger,
We can help you out with custom CSS if you point out the problem on your site, or if you create a new menu for mobile and assign it as your mobile menu under Enfold->Main Menu->General.
Best regards,
RikardHi!
Now I have added the menues to the page “Glasögon” again. Had to hide them a short while when showing the client. They work great on desktop but not on mobile. The problem occurs when I use a GRIDROW with two columns. (I think I wrote “colors sections” in my previous post)The page in question uses a layout of rows with an image in the left column and text in the right column. In the next row the order is reversed. Image to the right and text to the left. If I use this kind of layout without any modifications for mobile, the images shows up wrong in mobile view. Then I get the first row with IMAGE on top of TEXT and the next row with TEXT on top of IMAGE. That looks pretty confusing and on mobile I’d like it to be the same order on the entire page. IMAGE then TEXT under for every section/gridrow.
In order to do this I have created different gridrows for desktop and mobile and hide the ones I don’t want to be visible at each screen size. The layout works but the ID’s on the hidden gridrows are not recognized by the menu.
Hope this makes sense now when you can look at the menu :)
Regards, Roger
Hi again,
Any news on how to solve this problem? We are very close to go live and I really need to have this sorted out as soon as possible.Regards,
RogerHi,
Sorry for the delay. You have to remove the page path in the link or in its href attribute, so instead of /glasogon/#progressiva, you have to use #progressiva. You can edit the menu items in the Appearance > Menus panel. Let us know if it makes any difference.
Best regards,
IsmaelHi,
I’m afraid that didn’t work. Same behavior. The #progressiva and other ID´s are ignored in the mobile menu. The mobile version of the color sections share the same ID as the desktop version but seem to be overridden by the the desktop version that is hidden.Please advice.
Regards,
RogerHi,
It’s probably not working because it’s still trying to access the hidden sections with the same id on mobile view. What happens if you change the id of the sections and create a new set of menu items for mobile view?
Best regards,
IsmaelHi!
That worked partially. On desktop and smartphone portrait it works but everything in between does not. I have now created a mobile specific menu and changed the ID’s for all those color sections only activated on mobile. But as soon as the burger menu appears when I change the browser window size on desktop, the menu stops working again. On iPhone portrait it works now though. I have tried many combinations of different breaking points and browser sizes for hide/show the color sections but none have worked so far. What am I missing here? Seems like such a simple task, to link to an anchor in a color section from the menu. This is starting to get very frustrating. Given the current layout, how should I go about to get the menu to work on all screen sizes?Regards,
RogerHi,
How do you toggle the visibility of the menu sets for desktop and mobile view? It’s still not working on tablet view or medium sized screens because the color sections for mobile view are hidden. You should set the element visibility of the color sections so that those that are supposed to display on mobile view are visible on medium sized screens including the tablet view, and only hide them on large screens (desktop).
Element Visibility o Hide on large screens (wider than 990px - eg: Desktop) x Hide on medium sized screens (between 768px and 989px - eg: Tablet Landscape) x Hide on small screens (between 480px and 767px - eg: Tablet Portrait) x Hide on very small screens (smaller than 479px - eg: Smartphone Portrait) x is enabled.Best regards,
IsmaelHi!
Unfortunately there’s no change in behavior, I have tried all combinations to no avail. What am I missing here?
Regards, RogerHi,
You forgot to adjust the ID of the grid rows that are designated for mobile view, so we edited one of the grid row elements called progressiva, and replace its id with progressiva-mobil. The anchor is now working properly on our end. You should adjust the ID of the other sections or grids.
// https://imgur.com/a/HawZTsN
Thank you for your patience.
Best regards,
IsmaelHi!
Sorry but I don’t understand. The behavior is still the same, nothing has changed. There’s no difference on the progressiva grid row. The hamburger menu works on iPhone and desktop but nothing in between when resizing the browser menu in Safari and Chrome on Mac. As far as I can see, all the grid rows have the right -mobile ID too. Dubbel checked the mobile menu as well.Since everything works fine on iPhone I find it very strange if the ID’s would be incorrect, wouldn’t you agree?
Please advice, what am I doing wrong here? My client starts to wonder too..
Regards,
RogerHi,
It is working properly on our end. The page scrolls to the progressiva-mobil grid row element when we click the Glasogon > Progressiva glas item from inside the mobile menu. We are testing it on portrait mode of an iPad emulation as you can see in the screenshots below.
Firefox screenshot: https://imgur.com/a/HawZTsN
Chrome screenshot: https://imgur.com/a/q38eXn7Please don’t forget to remove the browser cache prior to checking the page.
Thank you for your patience.
Best regards,
IsmaelHi again!
I have cleared the cache several times but no difference. This is also the same on both Safari and Chrome on Mac. Just to clarify, It’s not when I emulate mobile devices I have the problem on desktop. It’s when making the browser window on desktop smaller so the burger menu takes over the problem occurs. All the other pages still works but none of the sub menu items on the page “Glasögon”.See link to short screen movie. There you can see me clicking around in the burger menu :)
Regards,
RogerHi again!
I think I have figured out why it didn’t work on my side. There was CSS making the burger menu to kick in at 1260px instead of tablet size in order to make the menu not covering the logo. I removed that CSS and changed the size of the logo with CSS instead and it seem to work, although I preferred the burger menu show a little earlier instead. Looks neater than the logo changing size for different browser sizes :)
Regards,
Roger
- You must be logged in to reply to this topic.