Dock Navbar Using HTML and CSS

Dock Navbar Using HTML and CSS
Code Snippet:Dock Navbar
Author: Mads Stoumann
Published: March 3, 2024
Last Updated: March 4, 2024
Downloads: 916
License: MIT
Edit Code online: View on CodePen
Read More

This HTML and CSS code snippet helps you to create a dock navbar on the webpage. The navbar sticks to the screen’s edge 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.

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

How to Create Dock Navbar Using HTML and CSS

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

<h2> This Page Demonstrates Dock Navbar </h2>
<article id="home" class="ui-page">
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="search" class="ui-page">
  <h2>Search</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="following" class="ui-page">
  <h2>Follows</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="settings" class="ui-page">
  <h2>Settings</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<nav class="ui-dock">
  <a href="#home">
    <svg viewBox="0 0 24 24">
      <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
    </svg>
  </a>
  <a href="#search">
    <svg viewBox="0 0 24 24">
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
      <path d="M21 21l-6 -6"></path>
    </svg>
  </a>
  <a href="#following">
    <svg viewBox="0 0 24 24">
      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
      <path d="M16 19h6"></path>
      <path d="M19 16v6"></path>
      <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
    </svg>
  </a>
  <a href="#settings">
    <svg viewBox="0 0 24 24">
      <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>
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
    </svg>
  </a>
</nav>

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.

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7mx9IgVG.ttf) format('truetype');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  display: grid;
  height: 100vh;
}
body {
  --gap: 1em;
  background-image: linear-gradient(117deg, #faa700, #00d4fa) !important;
  font-family: ui-sans-serif, system-ui;
  margin: 0;
  display: grid;
}
.ui-page {
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  font-size: clamp(1.0625rem, 1.4553rem, 1.3125rem);
  grid-area: -1;
  padding: 2ch;
}
.ui-page:target {
  display: block;
}
.ui-page :is(h1, h2) {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.33), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Jost', sans-serif;
  font-size: clamp(4rem, 7.5358rem, 6.25rem);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
#home {
  background-image: linear-gradient(117deg, hsl(191, 44%, 60%), hsla(191, 100%, 60%, 0.5));
}
#home:target ~ .ui-dock a[href="#home"]::after {
  background: #000;
}
#following {
  background-image: linear-gradient(117deg, hsl(39, 90%, 60%), hsla(39, 100%, 60%, 0.5));
}
#following:target ~ .ui-dock a[href="#following"]::after {
  background: #000;
}
#search {
  background-image: linear-gradient(117deg, hsl(161, 40%, 57%), hsla(161, 100%, 60%, 0.5));
}
#search:target ~ .ui-dock a[href="#search"]::after {
  background: #000;
}
#settings {
  background-image: linear-gradient(117deg, hsl(21, 78%, 59%), hsla(21, 100%, 59%, 0.5));
}
#settings:target ~ .ui-dock a[href="#settings"]::after {
  background: #000;
}
.ui-dock {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 1.75em;
  bottom: var(--gap);
  box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.3), 0 0 12px -7px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: var(--gap);
  grid-auto-flow: column;
  left: 50%;
  padding: var(--gap);
  place-content: center;
  place-self: center;
  position: fixed;
  translate: -50% 0;
}
.ui-dock a {
  border-radius: 1em;
  height: 4em;
  padding: 0.5em;
  position: relative;
  width: 4em;
}
.ui-dock a::after {
  border-radius: 50%;
  bottom: -0.5em;
  content: '';
  display: block;
  height: 0.25em;
  left: 50%;
  margin: auto;
  position: absolute;
  translate: -50% 0;
  width: 0.25em;
}
.ui-dock a:hover {
  box-shadow: 0 0 10px -2.5px rgba(0, 0, 0, 0.3), 0 0 6px -3px rgba(0, 0, 0, 0.2);
}
.ui-dock a svg {
  stroke-width: 1;
  stroke: #FFF;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[href="#home"] {
  background-color: #6CB5C6;
}
[href="#search"] {
  background-color: #65BDA1;
}
[href="#following"] {
  background-color: #F5B53F;
}
[href="#settings"] {
  background-color: #E87D44;
}

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"] and adjust the background colors according to your preferences. This step allows you to match the navbar colors with your overall webpage theme.

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X