{"id":2454,"date":"2024-01-17T16:50:00","date_gmt":"2024-01-17T16:50:00","guid":{"rendered":"https:\/\/codehim.com\/?p=2454"},"modified":"2024-01-22T14:51:14","modified_gmt":"2024-01-22T09:51:14","slug":"css-responsive-header-with-logo-and-menu","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/","title":{"rendered":"CSS Responsive Header with Logo and Menu"},"content":{"rendered":"

Here is a CSS and jQuery-based responsive header with a logo and menu plugin. It’s quite simple, customizable, and easy to use in your website projects.<\/p>\n

How to Make Responsive Header with Logo and Menu<\/h2>\n

1. First of all load the jQuery<\/strong> and Reset CSS<\/strong> into your website project to make responsive header.<\/p>\n

<!-- jQuery -->\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"><\/script>\r\n\r\n<!-- Reset CSS -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/meyer-reset\/2.0\/reset.min.css\">\r\n<\/pre>\n
2. After that, also include the Responsive Header Menu<\/strong>‘s CSS and JavaScript files.<\/p>\n
<!-- Responsive Header CSS -->\r\n<link rel=\"stylesheet\" href=\"css\/style.css\">\r\n\r\n<!-- Responsive Header Js -->\r\n<script  src=\"js\/index.js\"><\/script>\r\n<\/pre>\n
3. Finally create an HTML structure for a responsive header and add your menu links to it.<\/p>\n
  <header class=\"header clearfix\">\r\n        <div class=\"clearfix display-flex align-items contentHolder\" data-items=\"center\">\r\n            <div class=\"logo\"><a href=\"\"><img src=\"http:\/\/placehold.it\/230x60\/\" alt=\"logo Placeholder\"><\/a><\/div>\r\n            <nav class=\"menu\">\r\n                <ol>\r\n                    <li class=\"mainMenu\"><a href=\"\">Menu 1<\/a><\/li>\r\n                    <li class=\"mainMenu\"><a href=\"\">Menu 2<\/a>\r\n                        <ul class=\"submenu\">\r\n                            <li class=\"subOption\"><a href=\"\">SubMenu 1<\/a><\/li>\r\n                            <li class=\"subOption\"><a href=\"\">SubMenu 2<\/a><\/li>\r\n                            <li class=\"subOption\"><a href=\"\">SubMenu 3<\/a><\/li>\r\n                        <\/ul>\r\n                    <\/li>\r\n                    <li class=\"mainMenu mobileSub\"><a href=\"\">SubMenu 1<\/a><\/li>\r\n                    <li class=\"mainMenu mobileSub\"><a href=\"\">SubMenu 2<\/a><\/li>\r\n                    <li class=\"mainMenu mobileSub\"><a href=\"\">SubMenu 3<\/a><\/li>\r\n                    <li class=\"mainMenu\"><a href=\"\">Menu 3<\/a><\/li>\r\n                    <li class=\"mainMenu\"><a href=\"\">Menu 4<\/a><\/li>\r\n                    <li class=\"mainMenu\"><a href=\"\">Menu 5<\/a><\/li>\r\n                    <li class=\"mobileMenu mobileSocial\">\r\n                        <ul class=\"social\">\r\n                          <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 33 33\"><g><path d=\"M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z\"><\/path><\/g><\/svg><\/a><\/li>\r\n                            <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 33 33\"><g><path d=\"M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z\"><\/path><\/g><\/svg><\/a><\/li>\r\n                            <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 512 512\">><path d=\"M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z\"\/><path d=\"M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z\"\/><circle cx=\"351.5\" cy=\"160.5\" r=\"21.5\"\/><\/g><\/svg><\/a><\/li>\r\n                        <\/ul>\r\n                    <\/li>\r\n                <\/ol>\r\n                <div class=\"hamburger\"><span><\/span><\/div>\r\n                <div class=\"dimmer\"><\/div>\r\n            <\/nav> \r\n<ul class=\"social\">\r\n  <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 33 33\"><g><path d=\"M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z\"><\/path><\/g><\/svg><\/a><\/li>\r\n  <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 33 33\"><g><path d=\"M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z\"><\/path><\/g><\/svg><\/a><\/li>\r\n  <li><a target=\"_blank\" href=\"\"><svg viewBox=\"0 0 512 512\">><path d=\"M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z\"\/><path d=\"M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z\"\/><circle cx=\"351.5\" cy=\"160.5\" r=\"21.5\"\/><\/g><\/svg><\/a><\/li>\r\n<\/ul>\r\n      <\/div>\r\n  <\/header>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Here is a CSS and jQuery-based responsive header with a logo and menu plugin. It’s quite simple, customizable, and easy…<\/p>\n","protected":false},"author":1,"featured_media":2455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-2454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu"],"acf":[],"yoast_head":"\nCSS Responsive Header with Logo and Menu — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Responsive Header with Logo and Menu — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-17T16:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:51:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"962\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS Responsive Header with Logo and Menu\",\"datePublished\":\"2024-01-17T16:50:00+00:00\",\"dateModified\":\"2024-01-22T09:51:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\"},\"wordCount\":89,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg\",\"articleSection\":[\"Menu & Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\",\"url\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\",\"name\":\"CSS Responsive Header with Logo and Menu — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg\",\"datePublished\":\"2024-01-17T16:50:00+00:00\",\"dateModified\":\"2024-01-22T09:51:14+00:00\",\"description\":\"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg\",\"width\":1280,\"height\":962,\"caption\":\"CSS Responsive Header with Logo and Menu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu & Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Responsive Header with Logo and Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Responsive Header with Logo and Menu — CodeHim","description":"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/","og_locale":"en_US","og_type":"article","og_title":"CSS Responsive Header with Logo and Menu — CodeHim","og_description":"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.","og_url":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-17T16:50:00+00:00","article_modified_time":"2024-01-22T09:51:14+00:00","og_image":[{"width":1280,"height":962,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg","type":"image\/jpeg"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS Responsive Header with Logo and Menu","datePublished":"2024-01-17T16:50:00+00:00","dateModified":"2024-01-22T09:51:14+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/"},"wordCount":89,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg","articleSection":["Menu & Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/","url":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/","name":"CSS Responsive Header with Logo and Menu — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg","datePublished":"2024-01-17T16:50:00+00:00","dateModified":"2024-01-22T09:51:14+00:00","description":"Here is a CSS and jQuery based responsive header with logo and menu plugin. Its quite simple, customize and easy to use header menu in your website.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/05\/header-menu-css-jqery.jpg","width":1280,"height":962,"caption":"CSS Responsive Header with Logo and Menu"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/css-responsive-header-with-logo-and-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu & Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"CSS Responsive Header with Logo and Menu"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":25829,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/2454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=2454"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/2454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/2455"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=2454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=2454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=2454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}