Jump to content

Menu Help


KCRileyGyer
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...