Skip to main content ↑ ↓
Topic: Hamburger Button & Linktree with Opera (Read 2686 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Hamburger Button & Linktree with Opera

Not sure if this is already known and if it is a bug or just something wrong in css or maybe with Opera itself:

The Hamburger Button is working perfect for example with Firefox, but it is not working with Opera, it is not there at all, it has a "display: none" also in the mobile view.  With Opera the place for the Hamburger Button is always "empty", even in the normal view.

Because of this the linktree (even on the top of a topic) is looking different in different browsers. The linkree has got another border (or shadow) on the bottom, and parts of the linktree are jumping earlier into a second line, always with some space on the left side.

With Opera I will always see the moderator buttons. I cannot resize my browser window with Opera as much as it is possible with Firefox.  I also will get a scrollbar with Opera and the "jump to box" is breaking the layout, it is much to far on the right side.

I add a few screenshots to show the difference between Opera and Firefox.

Re: Hamburger Button & Linktree with Opera

Reply #1 –

What version of Opera?
And how does it work in Chrome?
Bugs creator.
Features destroyer.
Template killer.

Re: Hamburger Button & Linktree with Opera

Reply #2 –

Is this my version of opera? O:-)  This Number is from the install.exe: Opera_30.0.1835.125
(Edit: I think, it is version Opera 39. I don't know, where I can see this, when it is already installed)

I installed Opera exactly a year ago, when I got a new old pc, also installed Firefox at the same time.

Don't know, how it would look with Chrome...I always thought, Chrome and Opera are just the same O:-)
Last Edit: August 11, 2016, 07:24:56 am by Ruth

Re: Hamburger Button & Linktree with Opera

Reply #3 –

That's why I asked. :P
Actually Opera and Chrome became basically the same thing at about after Opera 12 (and I still use it), then there is "opera mini" that maybe someone calls "opera" for short. So better ask.
I have an idea of what the problem is (i.e. an image that is not resized and prevent the page to become narrow enough to trigger the media query), but I need to test it. So... later.
Bugs creator.
Features destroyer.
Template killer.

Re: Hamburger Button & Linktree with Opera

Reply #4 –

Quote from: Ruth – Is this my version of opera? O:-)  This Number is from the install.exe: Opera_30.0.1835.125
(Edit: I think, it is version Opera 39. I don't know, where I can see this, when it is already installed)

I installed Opera exactly a year ago, when I got a new old pc, also installed Firefox at the same time.

Don't know, how it would look with Chrome...I always thought, Chrome and Opera are just the same O:-)

Help > About

Re: Hamburger Button & Linktree with Opera

Reply #5 –

Thank you, meetdilip. I never noticed this. It is Opera 39:

QuoteVersionsinformation

Version: 39.0.2256.48 - Opera ist auf dem neuesten Stand
Update-Stream: Stable
Betriebssystem: Windows 7 64-bit (WoW64)

Emanuele, it is getting narrow enough to be in "@media screen and (max-width: 33.75em)" and should show the Hamburger and hide the moderator buttons, but it does not. It is the same here, on this site.

It seems to me, that Opera is doing some things different:

Another word-breaking in the posts as in Firefox, more space around or between things (for example around the buttons in main menu) and no "elipsis" to shorten the names of the boards in the jump-to-boxes.
Last Edit: August 12, 2016, 03:32:38 am by Ruth

Re: Hamburger Button & Linktree with Opera

Reply #6 –

I did not see this before:

If I zoom in browser to 125 % or more, which is very large with my resolution, the Hamburger button will be there in Opera and is working.

It is getting to @media screen and (max-width: 30em) then.

So maybe everything would be okay with opera on a mobile device?

It is very difficult  for me to guess about those mobile views, ::)  I have no handy to controll it.

Re: Hamburger Button & Linktree with Opera

Reply #7 –

Okay, let's put ourself on the same boat.
How do you "emulate" a mobile device?
Bugs creator.
Features destroyer.
Template killer.

Re: Hamburger Button & Linktree with Opera

Reply #8 –

Normally just by making my browser window as narrow as possible (or until the buttons in the main menu are jumping to the mobile view), with all three browsers our members are using. (The screenshots in my first post show it that way.)

But I also use the zoom in browser, to guess what the forum would look like for others. Because I have a much lower resolution on my old pc and a smaller screen than others have with their wide screens or modern laptops. If I change nothing on my PC or in browser I would always see ElkArte as it is with "@media screen and (max-width: 64em)".
Last Edit: August 13, 2016, 06:32:16 am by Ruth

Re: Hamburger Button & Linktree with Opera

Reply #9 –

X
Do you see the two rectangles icon on the left of "elements console sources ..."?
Click it, Opera will allow you to pick exact sizes of mobile devices without having to rely on narrowing too much.
No need to zoom, no need to guess: you want a 1024 x 600 device? You set your size and you have it available whenever you want.

30em is usually about 480 pixels, so if setting a device 480 pixels wide you don't see the hamburger with its functionalities there is a problem.

Take in consideration tha once you clicked the hamburger, you need to reload the page to see it again. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Hamburger Button & Linktree with Opera

Reply #10 –

Thank you very much, Emanuele. I should have known this before...would have been less of useless and senceless work for me. ;)

Yes, I will see the Hamburger with 480 pixel width, without changing anything else, here on this site and in my forum as well. I start to see the Hamburger at a width of 600 pixel.

So everything is alright then? :) 
(except the ugly linktree in Opera in the normal view)

Re: Hamburger Button & Linktree with Opera

Reply #11 –

I want to check everything in my forum again now, because I did some changes there in my custom_light.css, also for the normal view. I want to be sure, that everything in forum and portal will look as nice as possible in each browser and with any resolution.

Our members (and me too) 8)  need larger font-sizes as usual, some of them are nearly blind and they are used to make everything quite big on their PCs and in browser. I don't like the breakes of the board names and the board descriptions on narrow screens and I want always see (without zooming back) the board- and the topic-stats, even with my smaller screen, etc. So I did a lot of changes about those and other things.

I am using percent for the width of the wrapper, the width of the portal boxes and for some images in the header, etc. It seems much better to me for getting proper results in different browsers and and on different devices.

I have used a calculator now to convert em into pixel...so I may see, what those "media stuff" in css means in pixel.

Is this correct? O:-)

@media screen and (max-width: 30em) means less than 480px width of the screen
@media screen and (max-width: 33.750em) means less than 540px width of the screen
@media screen and (max-width: 50em) means less than 800px width of the screen
@media screen and (max-width: 64em) means less than 1024px width of the screen

I will see them always bigger (about 25 % bigger or with more pixel) on my pc, because of my lower resolution as it is usual, but it will help me to organize things a little.