Menu Help

[KCRileyGyer]

Hi,

I'm working on a new website and I need help in turning the menu into that mobile device '3 bar' icon that turns into a drop-down menu. The current menu is situated on the left-hand side under the header. When viewing the site via mobile device, I need the menu to appear in the top left corner over the top of the header. How can I do this? My coding knowledge is limited to html and css. Anything else beyond that and my brain goes to mush. This is why I don't create websites as a job lol.

Here is the link to the test site.

Any help is greatly appreciated.

[Rickname]

Have you tried using media queries? https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

As example 

@media only screen and (max-width:600px){
  /*CODE*/
}

 

[KCRileyGyer]

I do have @media queries for the site to adjust according to screen size but it doesn't change the menu to that 3 horizontal line icon.

[dsonesuk]

It does not change the menu, it is an additional icon element that is unhidden for specific device widths that has a click event to toggle showing menu whose layout is adjusted at the same time to fill the width of device.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

https://www.w3schools.com/howto/howto_css_menu_icon.asp

 

[KCRileyGyer]

Thank you, dsonesuk. I'll look at them tomorrow my time and see how I go.

[KCRileyGyer]

Extra question: The owner of the website wanted buttons as his menu for the site, with what I'm trying to do can that be applied to button style menu or does it only work with the top/side navigation menus? Link to the test pages is in my first post.

I'm kind of getting lost with this.

[dsonesuk]

Yes! it should be OK, because this left nav directly follows the header. If it was second from the header, then it would be little more trickier. It just means on smaller device, it would have 20% width removed, so it becomes auto or 100%, and then disable float with float: none, all within the media queries for smaller devices.

[KCRileyGyer]

Thanks for that, dsonesuk. Having looked at the code, I find it a bit daunting because I don’t know what I’m to edit to make it work with the site’s menu. I’m going to disappear for a while so I can tackle it but will check back here for responses a little later.