The following code will provide a navigation bar that collapses on Mobile view.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Responsive Hamburger Menu<\/title>\r\n <style>\r\n #MenuContainer {\r\n position: relative;\r\n }\r\n\r\n .menu-toggle {\r\n display: none;\r\n font-size: 24px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n #MenuItems {\r\n display: flex;\r\n }\r\n\r\n #MenuItems .MenuItem {\r\n margin: 0 10px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .menu-toggle {\r\n display: block;\r\n }\r\n \r\n #MenuItems {\r\n display: none;\r\n flex-direction: column;\r\n position: absolute;\r\n background-color: white;\r\n width: 100%;\r\n top: 40px;\r\n left: 0;\r\n z-index: 1000;\r\n border: 1px solid #ccc;\r\n }\r\n\r\n #MenuItems .MenuItem {\r\n margin: 10px 0;\r\n text-align: center;\r\n }\r\n \r\n #MenuItems.active {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"MenuContainer\">\r\n <button class=\"menu-toggle\" onclick=\"toggleMenu()\">\u2630<\/button>\r\n <div id=\"MenuItems\">\r\n <span class=\"MenuItem\"><a href=\"index.php\">Link 1<\/a><\/span>\r\n\t\t<span class=\"MenuItem\"><a href=\"index.php\">Link 2<\/a><\/span>\r\n\t\t<!-- Repeat as needed-->\r\n <\/div>\r\n <div style=\"clear:both\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n function toggleMenu() {\r\n var menuItems = document.getElementById(\"MenuItems\");\r\n if (menuItems.classList.contains(\"active\")) {\r\n menuItems.classList.remove(\"active\");\r\n } else {\r\n menuItems.classList.add(\"active\");\r\n }\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"The following code will provide a navigation bar that collapses on Mobile view. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Responsive […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":0,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}