+- Hack Forums (https://hackforums.net)
+-- Forum: Hack Forums Official Information (https://hackforums.net/forumdisplay.php?fid=1)
+--- Forum: Site News (https://hackforums.net/forumdisplay.php?fid=2)
+--- Thread: Header Nav Menu Challenge (/showthread.php?tid=5749246)
Header Nav Menu Challenge - Omniscient - Nov 7, 2017
The community is having a problem on different mobile devices with the way the menu operates and displays. I'm calling on the community for assistance to help resolve this faster than I wold. Since I'm getting a lot of complaints and I haven't yet fixed this and I'm sucky at javascript I may as well ask for community help.
Here is the challenge. I want that navigation system we have. The header menu is going to stay. However, it doesn't function perfectly across some iPhone devices. Some report that it's fully open on each page. Others show screenshots where the nav isn't 100% width across the top.
Initially I was using initial-scale=1.0 for the viewport meta tag but I keep playing with it to see how it effects the mobile page. Right now viewport is .75 because members complained about the forum being zoomed.
Here is the files it uses:
https://hackforums.net/jscripts/topnav.js
https://hackforums.net/cache/themes/theme10/topnav.css
Our current viewport meta.
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
And yes, I used a library and altered it for my needs. I am not ashamed of using a library, everyone does that. And for anyone who uses jquery, you're using a library too.
http://cssmenumaker.com/menu/jquery-responsive-dropdown-menu
So any pros that can help? I, and the community, would certainly appreciate it.
RE: Header Nav Menu Challenge - AutoWorld - Nov 7, 2017
Wishing I wasn't a scrubber and had some skills to help xD
RE: Header Nav Menu Challenge - Crystallize. - Nov 7, 2017
Can't you add hamburger menu for phone users? Would solve it all.
Or make the nav menu vertically for phone users?
I think one of those would fix our problems.
Or you want it to be same look even on phone?
RE: Header Nav Menu Challenge - Hackbase - Nov 7, 2017
I think you should try a different source code, the one you are using right now is 3 years old and won't work very well with latest devices. I found a better one.
https://www.smartmenus.org/download/
Demo: https://www.smartmenus.org/about/themes/
Without jQuery
Demo: http://bacsoftwareconsulting.com/blog/wp-content/uploads/2015/01/menu-demo/
http://bacsoftwareconsulting.com/blog/index.php/web-development/how-to-create-a-responsive-menu-without-jquery
RE: Header Nav Menu Challenge - Elitas - Nov 7, 2017
I might be totally wrong, but I've had success before with changing the display. You have display style set on the "<ul>" tags. Try changing it to "relative" or "inline-block".
RE: Header Nav Menu Challenge - Identical - Nov 7, 2017
Try changing the position values to "fixed" and play with it. Some need a "fixed" position over a "absolute" position.
RE: Header Nav Menu Challenge - THC - Nov 7, 2017
(Nov 7, 2017 10:49 AM)Omniscient Wrote: Here is the challenge. I want that navigation system we have. The header menu is going to stay. However, it doesn't function perfectly across some iPhone devices. Some report that it's fully open on each page. Others show screenshots where the nav isn't 100% width across the top.
Hopefully someone helps out with this, makes HF quite hard to browse on my s8+.
https://ibb.co/gX7DLw
RE: Header Nav Menu Challenge - He B TeMy - Nov 7, 2017
I dont know if you're currently altering the code but i see this on android 6 with firefox:
https://i.imgur.com/ZwOX1bj.png
Jquery is a PITA.
RE: Header Nav Menu Challenge - Omniscient - Nov 7, 2017
@Crystallize. - Thanks for your help. He gave me some updated code that I have working right now.
Still in the process of trying to get this resolved and eventually it will be. I ask that members show patience while I try my hardest to improve and perfect our navigation for all devices and browsers (some task!).
Quote:Try changing the position values to "fixed" and play with it. Some need a "fixed" position over a "absolute" position.
Nope, made it much worse.
Quote:I dont know if you're currently altering the code but i see this on android 6 with firefox:
Yes, I'm aware that on certain mobile browsers this isn't working correctly.
I may just need to use a completely different menu system. This one may not work as we need it to.
RE: Header Nav Menu Challenge - Views - Nov 7, 2017
Personally I use Hack Forums a lot via safari on my iPhone and everytime I browse a new page from there it extreme zooms me into making the menu look full screen, I will say forsure that the new menu looks way cleaner, glad to see you trying to make this perfect for everybody :)
RE: Header Nav Menu Challenge - Hackbase - Nov 7, 2017
(Nov 7, 2017 11:54 AM)Omniscient Wrote: @Crystallize. - Thanks for your help. He gave me some updated code that I have working right now.
Still in the process of trying to get this resolved and eventually it will be. I ask that members show patience while I try my hardest to improve and perfect our navigation for all devices and browsers (some task!).
Nope, made it much worse.
Yes, I'm aware that on certain mobile browsers this isn't working correctly.
I may just need to use a completely different menu system. This one may not work as we need it to.
I think you are having main issue due to :hover option in case, it doesn't works on touchscreen devices. Current code is very old and practically useless on new devices.
RE: Header Nav Menu Challenge - Autophobia - Nov 7, 2017
(Nov 7, 2017 12:10 PM)Views Wrote: Personally I use Hack Forums a lot via safari on my iPhone and everytime I browse a new page from there it extreme zooms me into making the menu look full screen, I will say forsure that the new menu looks way cleaner, glad to see you trying to make this perfect for everybody :)
Yeah i get this alot it zooms in on everything glad to see its looking to be fixed
RE: Header Nav Menu Challenge - Omniscient - Nov 7, 2017
Obviously working on it. Kind of screwed up right now but again, working on it.
RE: Header Nav Menu Challenge - iExploits - Nov 7, 2017
I would also like to point out that for me on my iPhone, the page is zoomed in on page refresh.
It's zoomed in to the top right corner where the width goes across the nav bar (which is at like 60% of the oage).
RE: Header Nav Menu Challenge - FamousHater - Nov 7, 2017
(Nov 7, 2017 12:38 PM)iExploits Wrote: I would also like to point out that for me on my iPhone, the page is zoomed in on page refresh.
It's zoomed in to the top right corner where the width goes across the nav bar (which is at like 60% of the oage).
already been stated. it does that for everyone thats on an Ios device.