side nav with menu icon?

[Coffeebuzz]

is there any way to insert the animated menu icon https://www.w3schools.com/howto/howto_css_menu_icon.asp  into the side nav overlay https://www.w3schools.com/howto/howto_js_sidenav.asp

[Ingolme]

Yes, but you have to understand how each of the two things are made.

[Coffeebuzz]

this is pretty much exactly the navigation i would like to create when the site is viewed on a mobile device http://blog.goway.com/globetrotting/2017/11/top-5-day-trips-in-the-cook-islands/  Are you able to tell me if the nav trigger is one image made up of a "hamburger" image combined with the site logo? it appears that it is all one graphic/image. But what i don't understand is how they are transitioning from the desktop menu to the mobile menu. how is this done? i mean what do i have to understand the most i.e. html, css, or javascript? thanks

 

[dsonesuk]

That is a sprite image, it removes the need to load images individually. It loads all in one go and prevents delay in the other image showing when required, then its just a matter of positioning the background image to show required image.

The change from desktop to other device width is controlled by css media queries, when a set device width is reached, the layout is changed to accommodate device width.

[Coffeebuzz]

how can i do this with the w3 code? thanks

[dsonesuk]

Learn about responsive layout with media queries https://www.w3schools.com/css/css3_mediaqueries.asp