{"id":9951,"date":"2024-03-03T10:31:00","date_gmt":"2024-03-03T10:31:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9951"},"modified":"2024-03-04T08:31:17","modified_gmt":"2024-03-04T03:31:17","slug":"dock-navbar-using-html-and-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/","title":{"rendered":"Dock Navbar Using HTML and CSS"},"content":{"rendered":"

This HTML and CSS code snippet helps you to create a dock navbar on the webpage. The navbar sticks to the screen’s edge<\/a> and contains links to different sections of a webpage. Each link is represented by an icon, and clicking on these icons takes you to the respective sections.<\/p>\n

The code uses CSS for styling, including gradients and hover effects<\/a> to enhance the visual appeal of the navbar. Overall, it’s helpful for creating a visually appealing and functional navigation system<\/a> for a webpage without using JavaScript.<\/p>\n

How to Create Dock Navbar Using HTML and CSS<\/h2>\n

1. Start by setting up the HTML structure. This code defines the different sections of the webpage and includes navigation links within a <nav><\/code> element. Modify the content within each section to suit your webpage.<\/p>\n

<h2> This Page Demonstrates Dock Navbar <\/h2>\r\n<article id=\"home\" class=\"ui-page\">\r\n  <h1>Home<\/h1>\r\n  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.<\/p>\r\n<\/article>\r\n<article id=\"search\" class=\"ui-page\">\r\n  <h2>Search<\/h2>\r\n  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.<\/p>\r\n<\/article>\r\n<article id=\"following\" class=\"ui-page\">\r\n  <h2>Follows<\/h2>\r\n  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.<\/p>\r\n<\/article>\r\n<article id=\"settings\" class=\"ui-page\">\r\n  <h2>Settings<\/h2>\r\n  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.<\/p>\r\n<\/article>\r\n<nav class=\"ui-dock\">\r\n  <a href=\"#home\">\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M5 12l-2 0l9 -9l9 9l-2 0\"><\/path>\r\n      <path d=\"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7\"><\/path>\r\n      <path d=\"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6\"><\/path>\r\n    <\/svg>\r\n  <\/a>\r\n  <a href=\"#search\">\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\"><\/path>\r\n      <path d=\"M21 21l-6 -6\"><\/path>\r\n    <\/svg>\r\n  <\/a>\r\n  <a href=\"#following\">\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\"><\/path>\r\n      <path d=\"M16 19h6\"><\/path>\r\n      <path d=\"M19 16v6\"><\/path>\r\n      <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4\"><\/path>\r\n    <\/svg>\r\n  <\/a>\r\n  <a href=\"#settings\">\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z\"><\/path>\r\n      <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\"><\/path>\r\n    <\/svg>\r\n  <\/a>\r\n<\/nav><\/pre>\n
2. Now, add the following CSS code to your project. It styles the sections, and navigation links, and creates the docking effect for the navbar. Customize each section’s appearance and content as desired.<\/p>\n
@font-face {\r\n  font-family: 'Jost';\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url(https:\/\/fonts.gstatic.com\/s\/jost\/v15\/92zPtBhPNqw79Ij1E865zBUv7mx9IgVG.ttf) format('truetype');\r\n}\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\nhtml {\r\n  display: grid;\r\n  height: 100vh;\r\n}\r\nbody {\r\n  --gap: 1em;\r\n  background-image: linear-gradient(117deg, #faa700, #00d4fa) !important;\r\n  font-family: ui-sans-serif, system-ui;\r\n  margin: 0;\r\n  display: grid;\r\n}\r\n.ui-page {\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n  display: none;\r\n  font-size: clamp(1.0625rem, 1.4553rem, 1.3125rem);\r\n  grid-area: -1;\r\n  padding: 2ch;\r\n}\r\n.ui-page:target {\r\n  display: block;\r\n}\r\n.ui-page :is(h1, h2) {\r\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.33), #ffffff);\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  font-family: 'Jost', sans-serif;\r\n  font-size: clamp(4rem, 7.5358rem, 6.25rem);\r\n  font-weight: 600;\r\n  margin: 0;\r\n  text-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);\r\n  text-transform: uppercase;\r\n}\r\n#home {\r\n  background-image: linear-gradient(117deg, hsl(191, 44%, 60%), hsla(191, 100%, 60%, 0.5));\r\n}\r\n#home:target ~ .ui-dock a[href=\"#home\"]::after {\r\n  background: #000;\r\n}\r\n#following {\r\n  background-image: linear-gradient(117deg, hsl(39, 90%, 60%), hsla(39, 100%, 60%, 0.5));\r\n}\r\n#following:target ~ .ui-dock a[href=\"#following\"]::after {\r\n  background: #000;\r\n}\r\n#search {\r\n  background-image: linear-gradient(117deg, hsl(161, 40%, 57%), hsla(161, 100%, 60%, 0.5));\r\n}\r\n#search:target ~ .ui-dock a[href=\"#search\"]::after {\r\n  background: #000;\r\n}\r\n#settings {\r\n  background-image: linear-gradient(117deg, hsl(21, 78%, 59%), hsla(21, 100%, 59%, 0.5));\r\n}\r\n#settings:target ~ .ui-dock a[href=\"#settings\"]::after {\r\n  background: #000;\r\n}\r\n.ui-dock {\r\n  backdrop-filter: blur(10px);\r\n  background-color: rgba(255, 255, 255, 0.45);\r\n  border-radius: 1.75em;\r\n  bottom: var(--gap);\r\n  box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.3), 0 0 12px -7px rgba(0, 0, 0, 0.2);\r\n  display: grid;\r\n  gap: var(--gap);\r\n  grid-auto-flow: column;\r\n  left: 50%;\r\n  padding: var(--gap);\r\n  place-content: center;\r\n  place-self: center;\r\n  position: fixed;\r\n  translate: -50% 0;\r\n}\r\n.ui-dock a {\r\n  border-radius: 1em;\r\n  height: 4em;\r\n  padding: 0.5em;\r\n  position: relative;\r\n  width: 4em;\r\n}\r\n.ui-dock a::after {\r\n  border-radius: 50%;\r\n  bottom: -0.5em;\r\n  content: '';\r\n  display: block;\r\n  height: 0.25em;\r\n  left: 50%;\r\n  margin: auto;\r\n  position: absolute;\r\n  translate: -50% 0;\r\n  width: 0.25em;\r\n}\r\n.ui-dock a:hover {\r\n  box-shadow: 0 0 10px -2.5px rgba(0, 0, 0, 0.3), 0 0 6px -3px rgba(0, 0, 0, 0.2);\r\n}\r\n.ui-dock a svg {\r\n  stroke-width: 1;\r\n  stroke: #FFF;\r\n  fill: none;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n[href=\"#home\"] {\r\n  background-color: #6CB5C6;\r\n}\r\n[href=\"#search\"] {\r\n  background-color: #65BDA1;\r\n}\r\n[href=\"#following\"] {\r\n  background-color: #F5B53F;\r\n}\r\n[href=\"#settings\"] {\r\n  background-color: #E87D44;\r\n}\r\n<\/pre>\n
If you wish to personalize the colors of your navbar, you can modify the background colors in the CSS code. Look for the sections marked with [href=\"#section\"]<\/code> and adjust the background colors according to your preferences. This step allows you to match the navbar colors with your overall webpage theme.<\/p>\n
That’s all! hopefully, you have successfully created Dock Navbar Using HTML and CSS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML and CSS code snippet helps you to create a dock navbar on the webpage. The navbar sticks to…<\/p>\n","protected":false},"author":1,"featured_media":9957,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-9951","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu"],"acf":[],"yoast_head":"\nDock Navbar Using HTML and CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dock Navbar Using HTML and CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-03T10:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T03:31:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Dock Navbar Using HTML and CSS\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\"},\"wordCount\":245,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png\",\"articleSection\":[\"Menu & Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\",\"url\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\",\"name\":\"Dock Navbar Using HTML and CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:17+00:00\",\"description\":\"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Dock Navbar Using HTML and CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu & Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dock Navbar Using HTML and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dock Navbar Using HTML and CSS — CodeHim","description":"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/","og_locale":"en_US","og_type":"article","og_title":"Dock Navbar Using HTML and CSS — CodeHim","og_description":"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-03T10:31:00+00:00","article_modified_time":"2024-03-04T03:31:17+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Dock Navbar Using HTML and CSS","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:17+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/"},"wordCount":245,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png","articleSection":["Menu & Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/","url":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/","name":"Dock Navbar Using HTML and CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:17+00:00","description":"Here is a free code snippet to create a Dock Navbar Using HTML and CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Dock-Navbar-Using-HTML-and-CSS.png","width":1280,"height":960,"caption":"Dock Navbar Using HTML and CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/dock-navbar-using-html-and-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu & Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"Dock Navbar Using HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2023,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9951"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9951\/revisions"}],"predecessor-version":[{"id":11319,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9951\/revisions\/11319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9957"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}