[visibility on mobile devices] css or js problem

Hi all !

Question related to responsive-design.

I have a few links in a ‘navigation pane’ that appear well on desktop, and when putting my screen smaller, the navigation pane is getting rendered differently so it suits better on mobile devices.
Doing this, a “menu” button shows so users can click to see the navigation links.

However, this only seems to work on my desktop. Trying this on my smartphone, only the menu button shows, but when clicking them, the links are not appearing.

What am I doing wrong here.

The html code:

<a id="menu-icon"></a>
<div id="nav">
	<ul>		
		<li><a href="link1.html">link 1</a></li>
		<li><a href="link2.html">link 2</a></li>
		<li><a href="link3.html">link 3</a></li>
	</ul>
</div>

The CSS code:

#nav { display: none; z-index: 2;
       position: fixed; bottom: 20px; left: 0px; margin: 0px; }

#nav ul li a { 
	display: inline-block; 
	width: 100%;  text-align: center;
	}

#menu-icon { display: block; 
	position: fixed; z-index: 2; 
}

The javascript code:

document.getElementById("menu-icon").onclick = function (){
    document.getElementById("nav").style.display = "block";
};

I omitted irrelevant code .
Wondering what I do wrong.
The onclick only seems to work on the desktop, not on mobile devices?

(live version to test: http://users.telenet.be/bulevardi/ )

Seems to be linking ok on my iphone.

However I don’t like the way you have implemented the menu as it won’t disappear once opened, You have also made it appear both on hover and onclick! I would just use onclick but you should also allow the menu to be closed as it just sits there blocking your content.

Look at implementing a proper ‘hamburger type’ menu where you can open and close the menu easily and neatly.

Also I wouldn’t use the a element without an href as that may cause some problems with clicking/focus etc. I would use a button element perhaps as you are opening a menu and not navigating somewhere.

1 Like

Hi PaulOB,

Nice to see you’re still around here, as a dinosaur.
I’ve been away from this forums here for years (sometimes I get back for a little question, but I used to be a sticky member years ago)

Yes, I added both the hover and onclick this morning to test, and left it there (until I would have the final solution maybe today)… as no one passes by on that page, it doesn’t do any harm.

I’ve been testing some other kinds of hamburger menu’s, but it doesn’t seem te be working right away. Hmm
But replacing the a element with a button was a good idea. However, the buttons style (background transparency) was different on both devices I tested.

That’s what frustrates me on coding: the compatibility.
Even when I would get it to work, I cannot test it on another device that I don’t own. There are so much devices/OS’s/browsers that can make zillions of combinations together.
So i’ll never know if it will work out the right way.
I always try to work with the W3Schools standards… and a couple of months ago it all worked out fine, on both of my devices. And now that I tested yesterday again, it seemed not to work anymore. That’s the problem with browsers/os’s getting an update, … and then suddenly things that worked fine don’t seem to work anymore.
It’s one of the reasons why I stopped creating websites years ago, I really do get a conehead from these situations. :wink:

Finding a solution to close the menu again, doesn’t come up on my priority list yet, as I’m not even getting it shown up in the first place (on all devices).

Just so ya know, W3 Schools is a private business with a clever name. It is not affiliated with the W3 Consortium who actually writes the standards.

3 Likes

A back -handed compliment if ever I saw one :slight_smile:

You can remove all the styling from the button element and style it exactly the same cross browser these days. Don’t rely on any of the defaults just create your own backgrounds, borders, padding, font-size, border-radius.

Here’s an old demo showing anchors and buttons side by side.

https://codepen.io/paulobrien/pen/rYGNbX

2 Likes

Oh, PaulOB, I didn’t mean to be negative about the ‘dinosaur’ thing, I just wanted to tell I’m happy to still see you around here! Maybe I didn’t formulate this the appropriate way … (English is not my mother tongue)
It’s always nice when you come back to a forum after a very very long time and you see nicknames appearing that you still know from that time… a time when the forum still had an old school design. I just can’t find my way in the new forum layout/design. :frowning:

Anyway, just to say the button trick helped me out! Thanks so much.
The transparent image I used first seemed to appear different, but the code was right. After clearing the cache/cookies of my browser it rendered good.

@ronpat: thanks, didn’t know about that. :slight_smile:

1 Like

It’s ok I thought it was funny anyway :slight_smile: I’m close to being a dinosaur anyway,

2 Likes

It’s your green face and big teeth which give that impression …

3 Likes

Ha ha! That’s not an actual picture - unlike yours :slight_smile:

3 Likes

Really?

All these years I’ve been labouring under a misapprehension …

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.