{"id":25077,"date":"2021-01-25T12:01:36","date_gmt":"2021-01-25T12:01:36","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=25077"},"modified":"2021-01-25T12:07:14","modified_gmt":"2021-01-25T12:07:14","slug":"header-nav-overflow-into-mobile-nav","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/header-nav-overflow-into-mobile-nav\/","title":{"rendered":"HEADER NAV OVERFLOW INTO MOBILE NAV"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Chris Weissenberger<\/li><li>November 27, 2019<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS (SCSS) \/ JS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is an amazing Menu, the idea behind this header nav is to move items that no longer fit into a navigation drawer\/mobile nav. The trick behind it is to give the header a set height and allow the header nav items to wrap, but hide the overflow. Then use JavaScript to check for any items that have wrapped and reveal them in the drawer\/mobile nav.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> resizeobserver.js<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/CAWeissen\/share\/zip\/wvvVKyo\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/CAWeissen\/pen\/wvvVKyo\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Chris Weissenberger November 27, 2019 Made with: HTML \/ CSS (SCSS) \/ JS About the code: This is an amazing Menu, the idea behind this header nav is to move items that no longer fit into a navigation drawer\/mobile nav. The trick behind it is to give the header a set height and allow the header nav items to wrap, but hide the overflow. Then use JavaScript to check for any items that have wrapped and reveal them in the drawer\/mobile nav. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: resizeobserver.js<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":25078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6928],"tags":[6943,2388,6934,3929],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/25077"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=25077"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/25077\/revisions"}],"predecessor-version":[{"id":25079,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/25077\/revisions\/25079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/25078"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=25077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=25077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=25077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}