NAV Element

Site Feedback
#1

This NAV Element : https://anymod.com/mod/navbar-shapely-mladdn?preview=true

A: )
it is missing a propper width for the sub-menu-A-Tags (the a-tags are not as wide and high as the LI Element is. This caused the links to not be clickable everywhere) I will have look into the CSS and improove this

B: )
The Navigation needs some JS-code to ensure the CURRENT Link Element is highlighted (active Element should be styled differently, eventuallly also if it is an element inside of the dropdown submenu by highlightling the parent a-Tag) I will have look into this - I will have to invest more time

C:)
I need to define the target="_blank" attribute for a single Link inside of the menu , but remained unable to do that , because by default, that attribute cannot be set for a specific link, at least I remained unable to accomplish this. That will be something I will have look into - I will have to invest more time into this

#2

We will check out and fix this mod, and also go through some of the newer mods again to check for issues. Thank you for reporting!

1 Like
#3

Thank you. Do not hesitate to take a look at this cloned version:

https://anymod.com/projects/86N4N3/dashboard

The Name of the Mod is: nkrkdn

While you might probably not want to copy my solution, it might help you to visualize the functions this Nav might additionally be equipped with.

You will probably be able to write this solution in a cleaner fashion with vue.

Additinal functions I have not yet mentioned include :

  • E.g. a Nav -Dropdown which is programatically closed on scroll: Not only will the nav-Element itself disappear on scroll(down), but also will the opened Nav-Dropdown-Element be automatically closed on scroll) . (that function is applied on mobile only)

See:
http://skysails-power.com.w00edd9f.kasserver.com/advantages.html

user: sky
pass: power

1 Like
#4

I will be grateful for a short notice after you fixed this . I will import your improovements right away.

1 Like
#5

Also am I grateful for any timeline you might be able to provide: When do you assume your Fix might be available? I am asking my question after 17 days have already gone by.

#6

Hi Stefan, we’ve bumped this to the front of the queue and should have it out this week :+1:

#7

hi Tyler, just to make double sure:

this ticket is related: it states there is an additional issue with the NAV on mobile devices.

#8

I tested the NAV on an old Tablet (IOS) while I was visiting my parents over the weekend.
I cannot say which ios-version the Apple I-Pad was (regretfully) , it it was no longer supported .

I found oout the Hamburger-Menu-Element was massively displaced.

The Hamburger-Menu-Element was floating completely below the NAV-Element itself. It was visible, but positioned completely below the Header-Element .

It is a pity I cannot specify further. I cannot say much more. It might be worth to take a glimpse on older Ipads (on Safari) to check for further serious potential errors with this MOD .

PS: I will also walk into an apple shop and test the Page on some recent iPads soon.

But on older ios Safari Browsers I guess I can confirm the error on my page. I cannot say if the template is affected as well, but I guess it is.

#9

Hi Stefan, we made some updates to the mod here: https://anymod.com/mod/navbar-shapely-mladdn?preview=true

Let us know if that works better for you.

#10

Are those the two changes you applied?
1:
I can see there is a new target="_self" attribute.
2:
Also The sub-menu-A-Tags has a propper width now .

Or did you work on more and I did not realize it? I found out some issues remain unfixed. And I already defined them in detail, let me sum up again:

A:
The Navigation still needs some JS-code to ensure the CURRENT Link Element is highlighted. The active Nav-Element should be styled differently. This is especially also the case if it is an element inside of the dropdown submenu (by highlightling the parent a-Tag).

B:
And for a propper UI on MOBILE it will be mandatory for the NAV to not position the sub-Menu absolute. Do you agree on this?

C:
I found out the Hamburger-Menu-Element is massively displaced on older IPAD Safari Versions. I tested the NAV on an old Tablet (IOS). Can you confirm this issue?

Can you confirm the above three issues remain unsolved? Can you confirm Those are issues anymod might want to adress? Please see Issues A + B + C .

http://skysails-power.com.w00edd9f.kasserver.com/anymod-test.html
user: sky
pass: power

PS: on MOBILE devices I would love the NAV to be positioned FIXED. It should be visible on scroll UP and not be visible on scroll DOWN. Also should it always be visible when the user has reached the bottom of the page. That means the nav-Element itself will disappear on scroll(down), and reappear on Scroll(up). A lot of cool NAV-Elements behave that way on Mobile today. Please See the below URL, I integrated those scroll-functionalities into my MOD there: http://skysails-power.com.w00edd9f.kasserver.com/advantages.html

#11

Today is saturday the 14th of September.

I consider the UI of this MOD non-mobile-ready : with regard to the sub-menu-structure

plus: older Safari browsers (on IOS-IPad-devices): might display the Hamburger-Menu massively mal-positioned.

And: The JS is not capable to highlight the ACTIVE Nav-Element. The currently “active” Page in the browser is not highlighted in the Navigation-pane.

AnyMod announced the intention to improove the TEMPLATE-NAV three weeks ago (22 days).

I forwarded a deadline to my client . The deadline has passed. I would like to update my client with a new deadline.

When will your Template-Nav-Module be ready for use?

As far as my use-case for this MOD is concerned: For Me The most important issue might be the “UI on Mobile”. Because I already developed a workaround solution on my own (took a lot of time!), because I wanted to highlight the active Link-Element on my webpage for this NAV. And the broken Styling on older IOS Ipads on Safari might not be as urgend, thus the UI on Mobile might be my biggest issue.

If you feel you cannot provide a reliable deadline, I might prefer to sit down and manually develop / improove the Template NAV on mobile myself. This is, however, not what I hoped for when I started dropping that Mod into my html-Structure 22 days ago.

#12

May I ask for a feedback on this? It is important for me to know if, and how this will progress. If this MOD will not progress, that is fine with me too. I will then have to develop a solution myself. I mainly need to know IF you will work on this, and (in case you do) until when I may expect a result…

skysails-power.com.w00edd9f.kasserver.com/anymod-test.html

#13

i guess this is the remaining main issue:

#14

We’ve spent some more time testing and we weren’t able to reproduce the issue you’re having on iOS, but we agree the sub menu should be redone for mobile. What we plan to do is have the sub menu be exposed below the parent once the parent is tapped. We should have that updated in the next 36 hours.

#15

Hi Damion, cool! Thank you for testing the IOS issue as well, I will invest some more time too, and test the IOS Issue on my end on some further devices today also. Maybe this issue only relates to my cloned version of the Mod. I will provide a report directly after I managed to do some further research.

PS: I really feel each Navigation-Mod inside of AnyMods Template Libary should also entertain some JS-logic to ensure the Active-Element is Highlighted within the Navigation.

#16

OK sounds good, Stefan :+1:

Here’s the updated version

Noted. We’ll take a look at those and see what we can put on the roadmap. Thanks for the input!

#17

Hey Damion, Hello Tyler,

The Dropdown Menu successfully works on Mobile ANDROID devices now, this is nice!

Regretfully the new solution does NOT work on IOS phones. The problem exists within the iOS Phone (latest version) on safari browsers as well as in chrome browsers. My IOS Software is up to date = ios 12.4.1 )

Besides, I the NAV DOES highlight Active Elemets on Desktop, but not on Mobile Devices. It is nice to see the Highlighting is working perfectly fine for Items inside of the Submenu too! That is cool on Desktop!

To sum up my testing : The Mobile Sub-Menues propperly works on Android phones, but the solution does NOT work on IOS (Mobile Sub-Menues do not respond at all) , additionally on Mobile Devices the current Link still is not highlighted .

To ease your testing on an IOS phone you may call :

http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html

user: sky
pass: power

On a real IOS device you should see the Sub-Menu will not respond, and the active-Nav-Element is not highlighted.

Can you confirm those two issues?

PS: http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#something
The highlighting ONLY works on desktop IF the FileName is 100% identical to the Link! IF a hastag is added to the filename, then the highlighting will no longer work: for example: anymod-test.html does work, but if the URl called in the adressbar includes a hashtag, then the solution will no longer work: anymod-test.html#something . I wonder what happens if the link has a folder in its path, like /goHere/index.html ? (I did not test this case)

#18

I looked deeper into why the highlighting on mobile devices was missing: While the class is successfully set, the css has an additional (unnessesary) media query for mobile devices. And the CSS Rules say the highlighting shall have the default color. Thus, not highlighting is visible, as the color remains the same, when on mobile devices. @media screen and (max-width: 992px) { &.active>.am-item { a { color: #5234f9;
}
that is why .

I think you can safely delete lines 255 to 264 to solve the problem. That media query is not needed at all.

Once you did this, the highlighting will also work on Mobile devices.

Which is GREAT!

Thank you :wink: And Please check if you agree to remove the above mentioned CSS Lines

#19

I also investigated into why the dropdown menue does not work on ios devices and I guess this might be the answer. I did not Find the time to solve this issue myself, but I feel it neds to be adressed for the template to work stable in production.

#20

And additionally I identified the true issue the highlightLinks() function still had.
The Code I wrote is very very dirty, I will celean it up within the next hour.

The Link for the Image(Logo) should be spared when checking for A-Tags to highlight.

Even though I will clean up the code, you might want to create your own version, as I am not a very experienced developer.

See my latest mod llorrn inside project https://anymod.com/projects/86N4N3

MOD URL :
https://anymod.com/mod/llorrn

You should see I changed all file-names from mere hashtags to finenames plus hashtags, like: index_individual_filename.html#something
and from that more realistic situation, I started to improove the function highlightLinks()

see:

image
image.png2604Ă—336 42.3 KB