{"id":2772,"date":"2025-07-09T04:26:35","date_gmt":"2025-07-09T04:26:35","guid":{"rendered":"https:\/\/sertifikasiprofesi.id\/blog\/?p=2772"},"modified":"2025-07-09T04:26:36","modified_gmt":"2025-07-09T04:26:36","slug":"cara-mudah-membuat-navbar-responsif-dengan-html-dan-css","status":"publish","type":"post","link":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/","title":{"rendered":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS"},"content":{"rendered":"\n<p>Navbar atau navigasi bar adalah elemen penting dalam desain web yang berfungsi membantu pengunjung menjelajahi isi situs dengan mudah. <\/p>\n\n\n\n<p>Di era digital saat ini, penting untuk memastikan bahwa navbar tampil optimal di berbagai ukuran layar, baik di desktop maupun perangkat mobile. <\/p>\n\n\n\n<p>Artikel ini membahas apa itu navbar, cara membuat navbar responsif, serta tips agar tampilannya tetap user-friendly.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#Apa_Itu_Navbar\" >Apa Itu Navbar?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#Cara_Membuat_Navbar_Responsif\" >Cara Membuat Navbar Responsif<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#1_Struktur_HTML_Dasar\" >1. Struktur HTML Dasar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#2_Tambahkan_CSS_untuk_Layout\" >2. Tambahkan CSS untuk Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#3_Buat_Responsive_dengan_Media_Query\" >3. Buat Responsive dengan Media Query<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#4_Tambahkan_Tombol_Toggle_Menu_JavaScript\" >4. Tambahkan Tombol Toggle Menu (JavaScript)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#5_Uji_di_Berbagai_Perangkat\" >5. Uji di Berbagai Perangkat<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_Navbar\"><\/span>Apa Itu Navbar?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Navbar adalah elemen antarmuka pada sebuah website yang berisi tautan ke halaman-halaman utama atau bagian penting dalam situs. <\/p>\n\n\n\n<p>Biasanya, navbar diletakkan di bagian atas (header) dan menjadi akses utama untuk berpindah antar halaman.<\/p>\n\n\n\n<p>Fungsi utama dari navbar antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menyediakan struktur navigasi yang jelas<\/li>\n\n\n\n<li>Meningkatkan pengalaman pengguna (user experience)<\/li>\n\n\n\n<li>Memudahkan pengunjung menemukan konten yang dicari<\/li>\n\n\n\n<li>Memperkuat branding situs melalui logo atau ikon<\/li>\n<\/ul>\n\n\n\n<p>Terdapat dua jenis navbar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navbar statis<\/strong>: Tetap di bagian atas saat pengguna menggulir halaman.<\/li>\n\n\n\n<li><strong>Navbar dinamis atau sticky<\/strong>: Mengikuti pergerakan scroll dan tetap tampil di layar.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga: <a href=\"https:\/\/sertifikasiprofesi.id\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Navbar_Responsif\"><\/span>Cara Membuat Navbar Responsif<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Membuat navbar yang responsif berarti navbar dapat menyesuaikan tampilannya dengan ukuran layar pengguna, khususnya antara versi desktop dan mobile. Berikut langkah-langkah dasar:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Struktur_HTML_Dasar\"><\/span>1. <strong>Struktur HTML Dasar<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Mulailah dengan membuat struktur navbar sederhana menggunakan elemen <code>&lt;nav&gt;<\/code>, <code>&lt;ul&gt;<\/code>, dan <code>&lt;li&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav&gt;\n  &lt;div class=\"logo\"&gt;MyWebsite&lt;\/div&gt;\n  &lt;ul class=\"nav-links\"&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Tambahkan_CSS_untuk_Layout\"><\/span>2. <strong>Tambahkan CSS untuk Layout<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan Flexbox atau Grid untuk menyusun elemen navbar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 20px;\n  background-color: #333;\n}\n.nav-links {\n  display: flex;\n  gap: 20px;\n}\n.nav-links a {\n  color: white;\n  text-decoration: none;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Buat_Responsive_dengan_Media_Query\"><\/span>3. <strong>Buat Responsive dengan Media Query<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tambahkan media query agar navbar berubah menjadi tampilan mobile:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 768px) {\n  .nav-links {\n    flex-direction: column;\n    display: none;\n  }\n  .nav-links.active {\n    display: flex;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Tambahkan_Tombol_Toggle_Menu_JavaScript\"><\/span>4. <strong>Tambahkan Tombol Toggle Menu (JavaScript)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan JavaScript untuk membuat tombol menu bekerja saat diklik:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"menu-toggle\" onclick=\"toggleMenu()\"&gt;&amp;#9776;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>function toggleMenu() {\n  document.querySelector('.nav-links').classList.toggle('active');\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Uji_di_Berbagai_Perangkat\"><\/span>5. <strong>Uji di Berbagai Perangkat<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan navbar dapat digunakan dengan baik di desktop, tablet, dan smartphone. Gunakan alat pengembang browser (DevTools) untuk simulasi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Membuat navbar responsif adalah keterampilan dasar namun penting dalam pengembangan web. Dengan kombinasi HTML, CSS, dan sedikit JavaScript, Anda bisa menciptakan navigasi yang rapi, fleksibel, dan mudah diakses oleh pengguna dari berbagai perangkat. <\/p>\n\n\n\n<p>Navbar yang responsif tidak hanya memperbaiki pengalaman pengguna, tetapi juga meningkatkan kesan profesional pada website Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navbar atau navigasi bar adalah elemen penting dalam desain web yang berfungsi membantu pengunjung menjelajahi isi situs dengan mudah. Di era digital saat ini, penting untuk memastikan bahwa navbar tampil optimal di berbagai ukuran layar, baik di desktop maupun perangkat mobile. Artikel ini membahas apa itu navbar, cara membuat navbar responsif, serta tips agar tampilannya [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"footnotes":""},"categories":[70],"tags":[160,159,158],"class_list":["post-2772","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sertifikasi-web-developer","tag-front-end-development","tag-navbar-mobile","tag-responsive-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi<\/title>\n<meta name=\"description\" content=\"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi\" \/>\n<meta property=\"og:description\" content=\"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\" \/>\n<meta property=\"og:site_name\" content=\"sertifikasiprofesi\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-09T04:26:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-09T04:26:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b\"},\"headline\":\"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS\",\"datePublished\":\"2025-07-09T04:26:35+00:00\",\"dateModified\":\"2025-07-09T04:26:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\"},\"wordCount\":312,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png\",\"keywords\":[\"front-end development\",\"navbar mobile\",\"responsive design\"],\"articleSection\":[\"Sertifikasi Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\",\"name\":\"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png\",\"datePublished\":\"2025-07-09T04:26:35+00:00\",\"dateModified\":\"2025-07-09T04:26:36+00:00\",\"description\":\"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.\",\"breadcrumb\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png\",\"contentUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sertifikasiprofesi.id\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#website\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/\",\"name\":\"sertifikasiprofesi\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sertifikasiprofesi.id\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\",\"name\":\"sertifikasiprofesi\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png\",\"contentUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png\",\"width\":209,\"height\":58,\"caption\":\"sertifikasiprofesi\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/sertifikasiprofesi.id\"],\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi","description":"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.","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:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/","og_locale":"en_US","og_type":"article","og_title":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi","og_description":"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.","og_url":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/","og_site_name":"sertifikasiprofesi","article_published_time":"2025-07-09T04:26:35+00:00","article_modified_time":"2025-07-09T04:26:36+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#article","isPartOf":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/"},"author":{"name":"admin","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b"},"headline":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS","datePublished":"2025-07-09T04:26:35+00:00","dateModified":"2025-07-09T04:26:36+00:00","mainEntityOfPage":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/"},"wordCount":312,"commentCount":0,"publisher":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png","keywords":["front-end development","navbar mobile","responsive design"],"articleSection":["Sertifikasi Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/","url":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/","name":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS - sertifikasiprofesi","isPartOf":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png","datePublished":"2025-07-09T04:26:35+00:00","dateModified":"2025-07-09T04:26:36+00:00","description":"Ingin punya menu navigasi yang ramah di smartphone? Simak cara membuat navbar responsif yang mudah dipahami untuk semua level developer.","breadcrumb":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#primaryimage","url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png","contentUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-5.png","width":600,"height":400,"caption":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-mudah-membuat-navbar-responsif-dengan-html-dan-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sertifikasiprofesi.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Mudah Membuat Navbar Responsif dengan HTML dan CSS"}]},{"@type":"WebSite","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#website","url":"https:\/\/sertifikasiprofesi.id\/blog\/","name":"sertifikasiprofesi","description":"","publisher":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sertifikasiprofesi.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization","name":"sertifikasiprofesi","url":"https:\/\/sertifikasiprofesi.id\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png","contentUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png","width":209,"height":58,"caption":"sertifikasiprofesi"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sertifikasiprofesi.id"],"url":"https:\/\/sertifikasiprofesi.id\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/comments?post=2772"}],"version-history":[{"count":1,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2772\/revisions"}],"predecessor-version":[{"id":2774,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2772\/revisions\/2774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/media\/2773"}],"wp:attachment":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/media?parent=2772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/categories?post=2772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/tags?post=2772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}