Responsive menu?

[jemostrom]

I've been playing with the theme and to me it looks like the menu doesn't display as an "hamburger menu" for narrow screens. Is this the intended design or am I missing something? (yep Hugo newbie)

[luizdepra]

Yes, we have and mobile menu. It should display in 768px or less screens.

[jemostrom]

Hmmm, I must be missing something ... it looks like this for me.

[khos2ow]

@jemostrom how did you test this? I mean is this a local clone of this theme? Are you sure you have the updated theme in your site?
For the sake of comparison you can take a look at https://deploy-preview-90--hugo-coder.netlify.com/ which is based of almost the latest of the master HEAD.

[jemostrom]

Yep, I downloaded a zip yesterday (I'm just playing around at the moment) and use it locally. But I see the same thing on the preview site. Here are screenshots from Safari and Firefox

[luizdepra]

We use max-width in the CSS rule for responsiveness.

@media only screen and (max-device-width : 768px)

Looks like you are resizing our browser window, and this will not trigger the mobile menu because your max-screen-width is still bigger than 768px.

You can test the mobile menu using the Developers Tools from your browser.

[jemostrom]

I'm probably too stupid to do things correctly (I'm not doing any web design so ...) but on Safari I enter the responsive mode and select one of the available iPhones ... and it looks like this

Am I doing something wrong here. Also, if I make my window narrow on my laptop shouldn't I also get the responsive menu? My thinking is that I might have several windows open and have made windows narrow so they can be viewed at the same time.

[jemostrom]

Firefox seem to do it correctly. I also checked the example site using my 6s Plus and it looks OK there also. So apparently it's Safari on my laptop that is doing something wrong.

But I'm still curious why the decision not show a "hamburger menu" on my laptop for narrow windows.

[jemostrom]

FWIW - I did change max-device-width to max-width and it displays as I first expected. But I don't know if I'm doing things correctly. Is there some description somewhere how I should work to make changes to CSS/SCSS (I have no previous experience of SCSS)?

[luizdepra]

Wierd. Can you give me the version of your Safari? Maybe we need to add an extra rule or something to make it work on Safari. Need some research.

Is there some description somewhere how I should work to make changes to CSS/SCSS (I have no previous experience of SCSS)?

Not yet. I need to write something. But you will need to use Hugo Extended v0.43 or more to compile the SCSS into CSS. The command make release will to this job for you. And, about changing the SCSS, it is very straightforward I think.

[jemostrom]

Yes, it's basically how to build the css files I need help with, the scss files looks almost like normal css files so I think handle that part.

Safari: Version 12.0 (14606.1.36.1.9)

[josephting]

I did some quick research and it seems like device-width have been deprecated.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out.

Ref: W3C | MDN

With that said, all max-device-width should be replaced with max-width.

• W3C Viewport/Page Dimensions width Media Feature
• MDN width CSS Media Feature

I can create a PR for this if you're OK with the proposed change.

[luizdepra]

@josephting sure. I would appreciate it.