{"id":1743,"date":"2019-06-21T17:02:28","date_gmt":"2019-06-21T17:02:28","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1743"},"modified":"2019-06-21T17:02:28","modified_gmt":"2019-06-21T17:02:28","slug":"bootstrap-mega-menu","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/","title":{"rendered":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu"},"content":{"rendered":"<p><strong>How we can create a mega menu easily using Bootstrap, HTML, &amp; CSS? Solution: Bootstrap Mega Menu With CSS In other words, Responsive Multiple Row Menu built-in Bootstrap library.<\/strong><\/p>\n<p>When we have to create a responsive site easily &amp; fast then we definitely choose <strong>Bootstrap<\/strong>. Because the most important elements we use in website building they are comes with Bootstrap. On many websites, you can see mega menus for showing more information to users. Big websites like school &amp; e-commerce always use the <strong>mega menu<\/strong>, because they have lots of verity or categories.<\/p>\n<p>To you will learn to create a <strong>multi-row dropdown menu using Bootstrap<\/strong>. These types of menus called <strong>Mega Menu<\/strong>, A mega menu contains image, forms,<span><a href=\"https:\/\/webdevtrick.com\/link-hover-effect-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\"> links<\/a><\/span>, etc. But In this menu, we added links only you can add other this that&#8217;s not difficult. When you are using bootstrap then creating all is easy. If you don&#8217;t have knowledge of bootstrap then start learning now that&#8217;s very easy. Previously I have shared many types of <span><a href=\"https:\/\/webdevtrick.com\/tag\/menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">menus<\/a><\/span> you can check out those.<\/p>\n<p>So, Today I am sharing A <strong>Bootstrap Mega Menu With CSS Responsive Design<\/strong>. Basically, This is a <strong>multi-row menu with Bootstrap, HTML, CSS, &amp; JavaScript<\/strong>. I used JavaScript for creating the <span><a href=\"https:\/\/webdevtrick.com\/toggle-button-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">toggle button<\/a><\/span> for the mobile version only, nothing else. You can remove JS if you don&#8217;t want toggle button for small screens.<\/p>\n<p>If you are thinking now how this mega menu actually is, then see the <strong>preview<\/strong> given below.<\/p>\n<h3>Preview Of Responsive Multiple Row Menu<\/h3>\n<p>See this video preview to getting an idea of how this mega or multi-row menu looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1743-1\" width=\"640\" height=\"310\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/mega-menu-html-css-bootstrap.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/mega-menu-html-css-bootstrap.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/mega-menu-html-css-bootstrap.mp4<\/a><\/video><\/div>\n<p>Now you can see this visually. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/free-bootstrap-login-form-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap Login Form<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-range-slider\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML CSS Range Slider<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/newsletter-signup-form\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animated Newsletter Signup Form<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-vertical-image-column\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vertical Image Column Slider<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Bootstrap Mega Menu With CSS Source Code<\/h2>\n<p>Before<strong> sharing source code<\/strong>, Let&#8217;s talk about it. As you know I used bootstrap for <strong>creating this mega menu<\/strong>. With Bootstrap I used CSS <em>@media<\/em> query to creating this responsive. For creating 3 rows I put <code>col-md-4<\/code>, which is a bootstrap class for creating 3 rows. Actually, Bootstrap device the screen size in 12 parts (get <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/layout\/grid\/\" target=\"_blank\" rel=\"noopener noreferrer\">info<\/a>), what why I put <code>col-md-4<\/code> because 4 multiply 3 equals 12.<\/p>\n<p>In the CSS section, I put many things because there are lots of links and their styles. Like every section stylish, responsive values, colors, etc. The CSS part is very easy to understand, there are no difficult things or properties. There are lots of small conditions, that&#8217;s why I am not explaining that.<\/p>\n<p>I used font-awesome for creating icons, Previously many time I have used this library for icons. As I told already, I just used JavaScript for creating a toggle button for small screens. In the small screen, there are no <span><a href=\"https:\/\/webdevtrick.com\/css-grid-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">grid<\/a><\/span> or multi-row menu, There options are all <span><a href=\"https:\/\/webdevtrick.com\/css-responsive-navbar\/\" target=\"_blank\" rel=\"noopener noreferrer\">dropdown<\/a><\/span>. When you click on the menu button on the mobile version, then all categories or links appear in dropdown order.<\/p>\n<p>There is nothing to explain because they are basics also I put many links that&#8217;s why there is little difficult to explain. After getting the codes you will understand automatically, If you get any trouble to understand anything then you can ask me.<\/p>\n<p>For creating this HTML CSS <span><a href=\"https:\/\/webdevtrick.com\/web-design\/bootstrap\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap<\/a><\/span> Mega Menu program, You have to create 3 files, First for <strong>HTML\/Bootstrap<\/strong>, second for <strong>CSS<\/strong>, &amp; the last one for <strong>JavaScript<\/strong>. Follow the steps to creating this without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<strong><em>index.html<\/em><\/strong>&#8216; and put these codes given below.<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Responsive Bootstrap Mega Menu | Webdevtrick.com&lt;\/title&gt;\r\n  \r\n  \r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Metrophobic\"&gt;\r\n\r\n      &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n\r\n  \r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n  &lt;div class=\"container\"&gt;\r\n\r\n  &lt;button id=\"toggle-button\"&gt;Open Menu&lt;\/button&gt;\r\n\r\n  &lt;div class=\"row main-container\"&gt;\r\n    &lt;div class=\"col-md-12\"&gt;\r\n\r\n      &lt;ul class=\"nav nav-pills pull-right\"&gt;\r\n        &lt;li class=\"inside-menu\"&gt;\r\n          &lt;a href=\"\" data-toggle=\"dropdown\"&gt; Web Design  &lt;b class=\"caret\"&gt;&lt;\/b&gt; &lt;\/a&gt;\r\n          &lt;ul class=\"dropdown-menu menu-dropdown\"&gt;\r\n            &lt;li&gt;\r\n              &lt;div class=\"container\"&gt;\r\n                &lt;div class=\"row\"&gt;\r\n                  &lt;div class=\"mega-menu clearfix\"&gt;\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n\r\n                      &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-battery-half\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                        \r\n                          &lt;div class=\"menu-head-title\"&gt;\r\n                            Basic\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            HTML\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            CSS\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                           JavaScript\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt;\r\n\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n\r\n                      &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-rocket\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                        \r\n                          &lt;div class=\"menu-head-title\"&gt;\r\n                            Softwares\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Adobe Photoshop\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Adobe Illustrator\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Adove XD\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt;\r\n\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n                     &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-battery-full\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                        \r\n                          &lt;div class=\"menu-head-title\"&gt;\r\n                            Advance\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            jQuery\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Bootstrap\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            jQuery UI\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt;\r\n\r\n                    &lt;\/div&gt;\r\n                  &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n              &lt;\/div&gt;\r\n            &lt;\/li&gt;\r\n          &lt;\/ul&gt;\r\n        &lt;\/li&gt;\r\n\r\n        &lt;li class=\"inside-menu\"&gt;\r\n          &lt;a href=\"\" data-toggle=\"dropdown\"&gt; Web Development &lt;b class=\"caret\"&gt;&lt;\/b&gt;&lt;\/a&gt;\r\n          &lt;ul class=\"dropdown-menu menu-dropdown\"&gt;\r\n            &lt;li&gt;\r\n             \r\n              &lt;div class=\"container\"&gt;\r\n                &lt;div class=\"row\"&gt;\r\n                  &lt;div class=\"mega-menu clearfix\"&gt;\r\n\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n                      &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-terminal\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                       \r\n                          &lt;div class=\"menu-head-title\" title=\"Web Development\"&gt;\r\n                            Frontent\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            React\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Vue\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Angular\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt; \r\n                    &lt;\/div&gt;\r\n\r\n\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n                      &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-code\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                        \r\n                          &lt;div class=\"menu-head-title\" title=\"Web Development\"&gt;\r\n                            Backend\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            PHP\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Node JS\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Python\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n\r\n                    &lt;div class=\"col-md-4\"&gt;\r\n                      &lt;div class=\"menu-section\"&gt;\r\n                        &lt;div class=\"menu-head\"&gt;\r\n                          &lt;div class=\"menu-head-icon-1\"&gt;\r\n                            &lt;i class=\"fa fa-database\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                        \r\n                          &lt;div class=\"menu-head-title\" title=\"Web Development\"&gt;\r\n                            Database\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            MySQL\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            SQLite\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                        &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                          &lt;div class=\"menu-items-icon-a\"&gt;\r\n                            &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                          &lt;\/div&gt;\r\n                          &lt;div class=\"items-title\"&gt;\r\n                            Mongo DB\r\n                          &lt;\/div&gt;\r\n                        &lt;\/a&gt;\r\n\r\n                      &lt;\/div&gt; \r\n\t\t\t\t\t  &lt;\/div&gt;\r\n\t\t\t\t\t\r\n                    &lt;\/li&gt;\r\n                  &lt;\/ul&gt;\r\n                &lt;\/li&gt;\r\n\r\n            &lt;li class=\"inside-menu\"&gt;\r\n              &lt;a class=\"\" href=\"\" data-toggle=\"dropdown\"&gt;SEO &lt;b class=\"caret\"&gt;&lt;\/b&gt;&lt;\/a&gt;\r\n              &lt;ul class=\"dropdown-menu menu-dropdown\"&gt;\r\n                &lt;li&gt;\r\n                \r\n                  &lt;div class=\"container\"&gt;\r\n                    &lt;div class=\"row\"&gt;\r\n                      &lt;div class=\"mega-menu clearfix\"&gt;\r\n\r\n                      \r\n                        &lt;div class=\"col-md-12\"&gt;\r\n                          &lt;div class=\"menu-section\"&gt;\r\n\r\n                            &lt;div class=\"menu-head\"&gt;\r\n                              &lt;div class=\"menu-head-icon-1\"&gt;\r\n                                &lt;i class=\"fa fa-search-plus\"&gt;&lt;\/i&gt;\r\n                              &lt;\/div&gt;\r\n                         \r\n                              &lt;div class=\"menu-head-title\"&gt;\r\n                                Search Engine Optimization\r\n                              &lt;\/div&gt;\r\n                            &lt;\/div&gt;\r\n\r\n                            &lt;div class=\"row\"&gt;\r\n                              &lt;div class=\"col-md-6\"&gt;\r\n\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                    Content Creation\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                    On Page\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                   Off Page\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                    Link Building\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n\r\n                              &lt;\/div&gt;\r\n\r\n\t\t\t\t\t\t\t\t&lt;div class=\"col-md-6\"&gt;\r\n\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                    White Hat\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                  Black Hat\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n                                &lt;a href=\"#\" class=\"menu-items\"&gt;\r\n                                  &lt;div class=\"menu-items-icon-a\"&gt;\r\n                                    &lt;i class=\"fa fa-arrow-circle-right\"&gt;&lt;\/i&gt;\r\n                                  &lt;\/div&gt;\r\n                                  &lt;div class=\"items-title\"&gt;\r\n                                    Grey Hat\r\n                                  &lt;\/div&gt;\r\n                                &lt;\/a&gt;\r\n\r\n                              &lt;\/div&gt;\r\n                            &lt;\/div&gt;\r\n                          &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n\r\n                      &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                  &lt;\/div&gt;\r\n                 \r\n                &lt;\/li&gt;\r\n              &lt;\/ul&gt;\r\n            &lt;\/li&gt;\r\n          &lt;\/ul&gt;\r\n\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;script src=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n\r\n &lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<strong><em>style.css<\/em><\/strong>&#8216; and put these codes by copy &amp; pasting.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\nbody {\r\n  font-family: 'Metrophobic', sans-serif;\r\n  font-weight: bold;\r\n  margin-top: 1rem;\r\n  background: #fff;\r\n}\r\n\r\n#toggle-button {\r\n  width: 100%;\r\n  padding: 20px 0;\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 991px) {\r\n  .menu-dropdown {\r\n    margin-top: 4rem;\r\n  }\r\n}\r\n@media (max-width: 767px) {\r\n  .menu-dropdown {\r\n    margin-top: inherit;\r\n  }\r\n}\r\n@media (max-width: 767px) {\r\n  #toggle-button {\r\n    display: block;\r\n  }\r\n\r\n  .nav.nav-pills.pull-right {\r\n    display: none;\r\n  }\r\n\r\n  a:first-child {\r\n    color: #fbb016 !important;\r\n  }\r\n  a:first-child:hover {\r\n    background-color: #222 !important;\r\n    color: #fbb016 !important;\r\n  }\r\n}\r\n@media (min-width: 768px) {\r\n  #toggle-button {\r\n    display: none;\r\n  }\r\n\r\n  .nav.nav-pills.pull-right {\r\n    display: block;\r\n  }\r\n}\r\n.nav {\r\n  display: block;\r\n}\r\n\r\n.mega-menu {\r\n  border: 3px solid #333;\r\n}\r\n.menu-dropdown {\r\n  left: 0;\r\n  right: 0;\r\n  padding: 0;\r\n}\r\n.inside-menu {\r\n  position: static !important;\r\n}\r\n.menu-section {\r\n  margin-bottom: 30px;\r\n}\r\n.menu-head {\r\n  color: #fbb016;\r\n  border-bottom: 1px solid #ccc;\r\n  padding: 15px 0;\r\n  font-size: 20px;\r\n}\r\n.menu-head:first-child {\r\n  margin-top: 15px;\r\n}\r\n.menu-head-icon-1 {\r\n  height: 35px;\r\n  float: left;\r\n  font-size: 40px;\r\n  margin-right: 10px;\r\n}\r\n.menu-head-icon-1 i {\r\n  display: block;\r\n}\r\n.menu-head-icon-2 {\r\n  margin-top: 6px;\r\n  float: right;\r\n}\r\n.menu-head-title {\r\n  margin-top: 6px;\r\n  font-weight: inherit;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.menu-items {\r\n  display: block;\r\n  font-size: 17px;\r\n  padding: 15px 0;\r\n  border-bottom: 1px solid #ccc;\r\n  color: red;\r\n  transition: all .3s ease;\r\n}\r\n.menu-items:link {\r\n  text-decoration: none;\r\n  color: #444;\r\n}\r\n.menu-items:visited {\r\n  text-decoration: none;\r\n  color: #444;\r\n}\r\n.menu-items:hover {\r\n  text-decoration: none;\r\n  background: #f2f2f2;\r\n  color: #444;\r\n  padding-left: 10px;\r\n}\r\n.menu-items:active {\r\n  text-decoration: none;\r\n  color: #444;\r\n}\r\n.menu-items-icon-a {\r\n  float: right;\r\n  color: #fbb016;\r\n}\r\n.items-title {\r\n  font-weight: inherit;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n@media (max-width: 767px) {\r\n  .mega-menu {\r\n    border: 0;\r\n  }\r\n  .menu-section {\r\n    margin-bottom: 10px;\r\n  }\r\n  .menu-head {\r\n    display: none;\r\n  }\r\n  .menu-items-icon-a {\r\n    display: none;\r\n  }\r\n  .items-title {\r\n    font-size: 14px;\r\n    padding-left: 15px;\r\n  }\r\n  .mega-menu .main-container + * {\r\n    display: block !important;\r\n  }\r\n  .inside-menu {\r\n    position: relative !important;\r\n    width: 100%;\r\n  }\r\n  .inside-menu .caret {\r\n    display: none;\r\n  }\r\n  .menu-dropdown {\r\n    display: block !important;\r\n    position: relative !important;\r\n    width: 100% !important;\r\n    border: none !important;\r\n    box-shadow: none;\r\n  }\r\n}\r\n\r\na {\r\n  color: #333 !important;\r\n  margin-top: 2px;\r\n}\r\n\r\na:hover,\r\n.nav .open &gt; a,\r\n.nav .open &gt; a:focus,\r\n.nav .open &gt; a:hover {\r\n  color: #fbb016 !important;\r\n}\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, Create a JavaScript file named &#8216;<strong><em>function.js<\/em><\/strong>&#8216; &amp; put the codes.<\/p>\n<pre class=\"lang:js decode:true \" title=\"function.js\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\n\r\n$(function() {\r\n  $(document).on('click', '.dropdown-menu', function(e) {\r\n    e.stopPropagation()\r\n  })\r\n})\r\n\r\n$( \"#toggle-button\" ).click(function() {\r\n  $( \".nav.nav-pills.pull-right\" ).slideToggle(\"slow\");\r\n});<\/pre>\n<p>That&#8217;s It. Now you have successfully created Bootstrap Mega Menu With CSS Responsive Design. In other words, multiple rows based dropdown &amp; responsive menu using HTML, CSS, JavaScript, &amp; Bootstrap library. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create a mega menu easily using Bootstrap, HTML, &amp; CSS? Solution: Bootstrap Mega Menu With CSS In other words, Responsive Multiple Row Menu built-in Bootstrap library. When we have to create a responsive site easily &amp; fast then we definitely choose Bootstrap. Because the most important elements we use in website building [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[48,43,46,22,41],"tags":[146,55,190,210,155,228,145],"class_list":["post-1743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-css","category-javascript","category-web-design","category-web-development","tag-css-menu","tag-dropdown-menu","tag-example-and-source-code","tag-grid","tag-html-and-css","tag-mega-menu","tag-overlay-menu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu<\/title>\n<meta name=\"description\" content=\"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu\" \/>\n<meta property=\"og:description\" content=\"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T17:02:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu\",\"datePublished\":\"2019-06-21T17:02:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\"},\"wordCount\":697,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg\",\"keywords\":[\"css menu\",\"dropdown menu\",\"example and source code\",\"grid\",\"html and css\",\"mega menu\",\"overlay menu\"],\"articleSection\":[\"Bootstrap\",\"CSS\",\"JavaScript\",\"Web Design\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\",\"url\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\",\"name\":\"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg\",\"datePublished\":\"2019-06-21T17:02:28+00:00\",\"description\":\"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg\",\"width\":1200,\"height\":629,\"caption\":\"bootstrap mega menu with css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu","description":"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.","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:\/\/webdevtrick.com\/bootstrap-mega-menu\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu","og_description":"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.","og_url":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-06-21T17:02:28+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu","datePublished":"2019-06-21T17:02:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/"},"wordCount":697,"commentCount":5,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg","keywords":["css menu","dropdown menu","example and source code","grid","html and css","mega menu","overlay menu"],"articleSection":["Bootstrap","CSS","JavaScript","Web Design","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/","url":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/","name":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg","datePublished":"2019-06-21T17:02:28+00:00","description":"What to create a multiple rows based menu? Check out this Bootstrap Mega Menu With CSS Responsive Design. Get Source Code Of this Grid menu.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/bootstrap-mega-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/bootstrap-mega-menu.jpg","width":1200,"height":629,"caption":"bootstrap mega menu with css"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/bootstrap-mega-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Mega Menu With CSS | Responsive Multiple Row Menu"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1743"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1744"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}