{"id":14440,"date":"2012-07-24T21:01:53","date_gmt":"2012-07-24T13:01:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14440"},"modified":"2025-04-04T01:11:06","modified_gmt":"2025-04-03T17:11:06","slug":"responsive-web-nav","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/","title":{"rendered":"How to Create a Responsive Navigation For Your Site"},"content":{"rendered":"<p>One of the trickiest parts to be <em>responsified<\/em> on a website is <strong>\u201cthe Navigation\u201d<\/strong>, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.<\/p>\n<p>There are actually many ways to create responsive web site navigation and even some <a target=\"_blank\" href=\"https:\/\/github.com\/mattkersley\/Responsive-Menu\/\" rel=\"noopener\">jQuery plugins<\/a> are available <a target=\"_blank\" href=\"https:\/\/github.com\/sebnitu\/HorizontalNav\" rel=\"noopener\">to do it in a second<\/a>.<\/p>\n<p>However, rather than applying an instant solution, in this post, we are going to walk you through on <strong>how to build a simple navigation from the ground<\/strong> and using the <a target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-mediaqueries\/#media0\" rel=\"noopener nofollow\">CSS3 media queries<\/a> and a little <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/jquery\/\" rel=\"noopener\">jQuery<\/a> to display it in a small screen size like <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/evolution-of-mobile-phones\/\" rel=\"noopener\">the smartphones<\/a> properly.<\/p>\n<p>So, let\u2019s just get started.<\/p>\n<ul class=\"download download-2c\">\n<li><a target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/responsive-web-nav\/\" rel=\"noopener\">Demo<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/responsive-web-nav\/\" rel=\"noopener\">Download Source<\/a><\/li>\n<\/ul>\n<h2>HTML<\/h2>\n<p>First of all, let\u2019s add the <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en\/Mobile\/Viewport_meta_tag\" title=\"\" rel=\"noopener\">meta viewport<\/a> inside the <code>head<\/code> tag. This <strong>meta viewport<\/strong> tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.<\/p>\n<pre>\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"&gt;\r\n<\/pre>\n<p>\u2026and then add the following snippet as the navigation markup inside the <code>body<\/code> tag.<\/p>\n<pre>\r\n&lt;nav class=\"clearfix\"&gt;\r\n\t&lt;ul class=\"clearfix\"&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;How-to&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;Icons&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;Design&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;Web 2.0&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;Tools&lt;\/a&gt;&lt;\/li&gt;\t\r\n\t&lt;\/ul&gt;\r\n\t&lt;a href=\"#\" id=\"pull\"&gt;Menu&lt;\/a&gt;\r\n&lt;\/nav&gt;\r\n<\/pre>\n<p>As you can see above, we have six primary menu links and added one more link after them. This extra link will be used to <strong>pull<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/building-mobile-app-navigation-with-jquery\/\" rel=\"noopener\">the menu navigation<\/a> when it is hidden in a small screen.<\/p>\n<p><strong>Further reading:<\/strong> <a target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/articles\/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972\" rel=\"noopener nofollow\">Don\u2019t forget the viewport meta tag<\/a>.<\/p>\n<h2>Styles<\/h2>\n<p>In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the <code>body<\/code> to have a soft and creamy color.<\/p>\n<pre>\r\nbody {\r\n\tbackground-color: #ece8e5;\r\n}\r\n<\/pre>\n<p>The <code>nav<\/code> tag that define the navigation will have <code>100%<\/code> full width of the browser window, while the <code>ul<\/code> where it contains our primary menu links will have <code>600px<\/code> for the width.<\/p>\n<pre>\r\nnav {\r\n\theight: 40px;\r\n\twidth: 100%;\r\n\tbackground: #455868;\r\n\tfont-size: 11pt;\r\n\tfont-family: 'PT Sans', Arial, sans-serif;\r\n\tfont-weight: bold;\r\n\tposition: relative;\r\n\tborder-bottom: 2px solid #283744;\r\n}\r\nnav ul {\r\n\tpadding: 0;\r\n\tmargin: 0 auto;\r\n\twidth: 600px;\r\n\theight: 40px;\r\n}\r\n<\/pre>\n<p>Then, we will <code>float<\/code> the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.<\/p>\n<pre>\r\nnav li {\r\n\tdisplay: inline;\r\n\tfloat: left;\r\n}\r\n<\/pre>\n<p>If you notice from the HTML markup above, we\u2019ve already added <code>clearfix<\/code> in the <code>class<\/code> attribute for both the <code>nav<\/code> and <code>ul<\/code> to clear things around when we float the elements inside it using this <a target=\"_blank\" href=\"https:\/\/nicolasgallagher.com\/micro-clearfix-hack\/\" rel=\"noopener\">CSS clearfix hack<\/a>. So, let\u2019s add the following style rules in the style sheet.<\/p>\n<pre>\r\n.clearfix:before,\r\n.clearfix:after {\r\n    content: \" \";\r\n    display: table;\r\n}\r\n.clearfix:after {\r\n    clear: both;\r\n}\r\n.clearfix {\r\n    *zoom: 1;\r\n}\r\n<\/pre>\n<p>Since we have six menu links and we also have specified the container for <code>600px<\/code>, each menu links will have <code>100px<\/code> for the width.<\/p>\n<pre>\r\nnav a {\r\n\tcolor: #fff;\r\n\tdisplay: inline-block;\r\n\twidth: 100px;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\tline-height: 40px;\r\n\ttext-shadow: 1px 1px 0px #283744;\r\n}\r\n<\/pre>\n<p>The menu links will be separated with <code>1px<\/code> right border, except for the last one. Remember our previous post on box model, the menu\u2019s width will be expanded for <code>1px<\/code> making it <code>101px<\/code> as the border addition, so here we change the <code>box-sizing<\/code> model to <code>border-box<\/code> in order to keep the menu remains <code>100px<\/code>.<\/p>\n<pre>\r\nnav li a {\r\n\tborder-right: 1px solid #576979;\r\n\tbox-sizing:border-box;\r\n\t-moz-box-sizing:border-box;\r\n\t-webkit-box-sizing:border-box;\r\n}\r\nnav li:last-child a {\r\n\tborder-right: 0;\r\n}\r\n<\/pre>\n<p>Next, the menu will have brighter color when it is in <code>:hover<\/code> or <code>:active<\/code> state.<\/p>\n<pre>\r\nnav a:hover, nav a:active {\r\n\tbackground-color: #8c99a4;\r\n}\r\n<\/pre>\n<p>\u2026and lastly, the extra link will be hidden (for the desktop screen).<\/p>\n<pre>\r\nnav a#pull {\r\n\tdisplay: none;\r\n}\t\t\r\n<\/pre>\n<p>At this point, we only styling the navigation and nothing will happen when we resize the browser window. So, let\u2019s jump to the next step.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg\" alt=\"nav styled\" width=\"500\" height=\"200\"><\/figure>\n<p><strong>Further reading:<\/strong> CSS3 Box-sizing (Hongkiat.com)<\/p>\n<h2>Media Queries<\/h2>\n<p>The <a target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-mediaqueries\/#media0\" rel=\"noopener nofollow\">CSS3 media queries<\/a> is used to define how the styles will shift in some certain breakpoints or specifically the device screen sizes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/device-screen-size.jpg\" alt=\"device screen size\" width=\"500\" height=\"300\"><\/figure>\n<p>Since our navigation is initially <code>600px<\/code> fix-width, we will first define the styles when it is viewed in <code>600px<\/code> or lower screen size, so practically speaking, <strong>this<\/strong> is our first breakpoint.<\/p>\n<p>In this screen size, each of two menu links will be displayed side by side, so the <code>ul<\/code>\u2018s width here will be <code>100%<\/code> of the browser window while the menu links will have <code>50%<\/code> for the width.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-600.jpg\" alt=\"nav 600\" width=\"500\" height=\"320\"><\/figure>\n<pre>\r\n@media screen and (max-width: 600px) {\r\n\tnav { \r\n  \t\theight: auto;\r\n  \t}\r\n  \tnav ul {\r\n  \t\twidth: 100%;\r\n  \t\tdisplay: block;\r\n  \t\theight: auto;\r\n  \t}\r\n  \tnav li {\r\n  \t\twidth: 50%;\r\n  \t\tfloat: left;\r\n  \t\tposition: relative;\r\n  \t}\r\n  \tnav li a {\r\n\t\tborder-bottom: 1px solid #576979;\r\n\t\tborder-right: 1px solid #576979;\r\n\t}\r\n  \tnav a {\r\n\t  \ttext-align: left;\r\n\t  \twidth: 100%;\r\n\t  \ttext-indent: 25px;\r\n  \t}\r\n}\r\n<\/pre>\n<p>\u2026and then, we also define how the navigation is displayed when the screen get smaller by <code>480px<\/code> or lower (so this is our second breakpoint).<\/p>\n<p>In this screen size, the extra link that we\u2019ve added before will start visible and we also give the link a \u201cMenu\u201d icon on its right-side using the <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" rel=\"noopener\"><code>:after<\/code> <em>pseudo-element<\/em><\/a>, while the primary menu links will be hidden to save more vertical spaces on the screen.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-480.jpg\" width=\"500\" height=\"320\"><\/figure>\n<pre>\r\n@media only screen and (max-width : 480px) {\r\n\tnav {\r\n\t\tborder-bottom: 0;\r\n\t}\r\n\tnav ul {\r\n\t\tdisplay: none;\r\n\t\theight: auto;\r\n\t}\r\n\tnav a#pull {\r\n\t\tdisplay: block;\r\n\t\tbackground-color: #283744;\r\n\t\twidth: 100%;\r\n\t\tposition: relative;\r\n\t}\r\n\tnav a#pull:after {\r\n\t\tcontent:\"\";\r\n\t\tbackground: url('nav-icon.png') no-repeat;\r\n\t\twidth: 30px;\r\n\t\theight: 30px;\r\n\t\tdisplay: inline-block;\r\n\t\tposition: absolute;\r\n\t\tright: 15px;\r\n\t\ttop: 10px;\r\n\t}\r\n}\r\n<\/pre>\n<p>Lastly, when the screen gets smaller by <code>320px<\/code> and lower the menu will be displayed vertically top to bottom.<\/p>\n<pre>\r\n@media only screen and (max-width : 320px) {\r\n\tnav li {\r\n\t\tdisplay: block;\r\n\t\tfloat: none;\r\n\t\twidth: 100%;\r\n\t}\r\n\tnav li a {\r\n\t\tborder-bottom: 1px solid #576979;\r\n\t}\r\n}\r\n<\/pre>\n<p>Now, you can try resizing the browser window. It should now be able to adapt the screen size.<\/p>\n<p><strong>Further reading:<\/strong> <a target=\"_blank\" href=\"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\" rel=\"noopener\">Media Queries for Standard Devices<\/a>.<\/p>\n<h2>Showing the Menu<\/h2>\n<p>At this point, the menu will still be hidden and will only be visible when it is needed by tapping or clicking on the <strong>\u201cMenu\u201d<\/strong> link and we can achieve the effect using the jQuery <code>slideToggle()<\/code>.<\/p>\n<pre>\r\n$(function() {\r\n\tvar pull \t\t= $('#pull');\r\n\t\tmenu \t\t= $('nav ul');\r\n\t\tmenuHeight\t= menu.height();\r\n\r\n\t$(pull).on('click', function(e) {\r\n\t\te.preventDefault();\r\n\t\tmenu.slideToggle();\r\n\t});\r\n});\r\n<\/pre>\n<p>However, when you resize the browser window right after you\u2019ve just viewed and hid the menu in a small screen, the menu will remain hidden, as the <code>display: none<\/code> style generated by the jQuery is still attached in the element.<\/p>\n<p>So, we need to remove this style upon the window resizing, as follows:<\/p>\n<pre>\r\n$(window).resize(function(){\r\n\tvar w = $(window).width();\r\n\tif(w &gt; 320 && menu.is(':hidden')) {\r\n\t\tmenu.removeAttr('style');\r\n\t}\r\n});\t\r\n<\/pre>\n<p>Alright, that\u2019s all the codes we need, we can now view the navigation from the following links, and we recommend you to test it in a responsive design test tool, such as <a target=\"_blank\" href=\"http:\/\/www.responsinator.com\/\" rel=\"noopener nofollow\">the Responsinator<\/a>, so that you can view it in various width at once.<\/p>\n<ul class=\"download download-2c\">\n<li><a target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/responsive-web-nav\/\" rel=\"noopener\">Demo<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/responsive-web-nav\/\" rel=\"noopener\">Download Source<\/a><\/li>\n<\/ul>\n<h2>Bonus: An Alternative Way<\/h2>\n<p>As we have mentioned earlier in this post, there some other ways of doing it, and using a JavaScript library called <a target=\"_blank\" href=\"http:\/\/lukaszfiszer.github.com\/selectnav.js\/\" rel=\"noopener nofollow\"><strong>SelectNav.js<\/strong><\/a> <strong>is one of the easiest way<\/strong>. This is a pure JavaScript that is not relying on another third party library like jQuery.<\/p>\n<p>Basically, it will duplicate your list menu and transform it into a <code>&lt;select&gt;<\/code> dropdown menu, then you are able to choose which one is hidden or shown depending on the screen size through media queries.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-select.jpg\" alt=\"nav select\" width=\"500\" height=\"200\"><\/figure>\n<p>One of an advantage I like on this practice is that we don\u2019t have to worry on the navigation style as the <code>&lt;select&gt;<\/code> menu will make use of the native user interface from the device itself.<\/p>\n<p>Please, refer to the <a target=\"_blank\" href=\"http:\/\/lukaszfiszer.github.com\/selectnav.js\/#how\" rel=\"noopener nofollow\">official documentation<\/a> for further implementation.<\/p>\n<h2>Conclusion<\/h2>\n<p>We have come through all the way to create responsive navigation from scratch. This one we have created here is just one of examples, and as we stated earlier in this post and shown above, there are many other solutions you can implment. So, it is now leave to your decision to pick which practice that best fit to cater requirement and your web site navigation structure.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the trickiest parts to be responsified on a website is \u201cthe Navigation\u201d, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages. There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[4102,2065,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Responsive Navigation For Your Site - Hongkiat<\/title>\n<meta name=\"description\" content=\"One of the trickiest parts to be responsified on a website is &quot;the Navigation&quot;, this part is really important for the website accessibility, as this is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Responsive Navigation For Your Site\" \/>\n<meta property=\"og:description\" content=\"One of the trickiest parts to be responsified on a website is &quot;the Navigation&quot;, this part is really important for the website accessibility, as this is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-24T13:01:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:11:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Create a Responsive Navigation For Your Site\",\"datePublished\":\"2012-07-24T13:01:53+00:00\",\"dateModified\":\"2025-04-03T17:11:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/\"},\"wordCount\":1027,\"commentCount\":68,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-nav\\\/nav-styled.jpg\",\"keywords\":[\"Interface Design\",\"responsive\",\"Responsive Web Design\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/\",\"name\":\"How to Create a Responsive Navigation For Your Site - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-nav\\\/nav-styled.jpg\",\"datePublished\":\"2012-07-24T13:01:53+00:00\",\"dateModified\":\"2025-04-03T17:11:06+00:00\",\"description\":\"One of the trickiest parts to be responsified on a website is \\\"the Navigation\\\", this part is really important for the website accessibility, as this is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-nav\\\/nav-styled.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-nav\\\/nav-styled.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-nav\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Responsive Navigation For Your Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Responsive Navigation For Your Site - Hongkiat","description":"One of the trickiest parts to be responsified on a website is \"the Navigation\", this part is really important for the website accessibility, as this is","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:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Responsive Navigation For Your Site","og_description":"One of the trickiest parts to be responsified on a website is \"the Navigation\", this part is really important for the website accessibility, as this is","og_url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-24T13:01:53+00:00","article_modified_time":"2025-04-03T17:11:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Create a Responsive Navigation For Your Site","datePublished":"2012-07-24T13:01:53+00:00","dateModified":"2025-04-03T17:11:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/"},"wordCount":1027,"commentCount":68,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg","keywords":["Interface Design","responsive","Responsive Web Design"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/","url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/","name":"How to Create a Responsive Navigation For Your Site - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg","datePublished":"2012-07-24T13:01:53+00:00","dateModified":"2025-04-03T17:11:06+00:00","description":"One of the trickiest parts to be responsified on a website is \"the Navigation\", this part is really important for the website accessibility, as this is","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-nav\/nav-styled.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Responsive Navigation For Your Site"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3KU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14440"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14440\/revisions"}],"predecessor-version":[{"id":73536,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14440\/revisions\/73536"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14440"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}