How to build, pin, and style the Top Navigation Menu in Dia Root

The top navigation (header menu) is one of the first things visitors use — and see — on your blog. A well-structured, sticky, and brand-colored top menu improves usability, reduces bounce rate, and makes your site feel professional. Below is a clear, hands-by-step guide to create the top menu, make it sticky, and customize its colors in the Dia Root template (Blogger), with practical code snippets and best practices.

Quick overview

Create the menu links via Layout → Pages (or a custom HTML gadget).
Make the menu sticky with either the built-in option or a small CSS patch.
Customize background, link, hover and active colors via Theme → Customize → Advanced → Add CSS or by editing the template HTML.
Test on desktop & mobile and check accessibility.

1) Create the top navigation (step-by-step)

Go to your Blogger Dashboard → select your blog.
Open Layout. Look for the gadget named Pages, Top Menu, Navigation or similar (Dia Root often includes a top menu gadget).
Click Edit to add or remove links. Recommended items: Home, News, Tech, Reviews, About, Contact.
Arrange links in the order you want and save.
If you want dropdowns (submenus), some Dia Root versions support nested menus via Pages gadget — otherwise you can create a custom HTML gadget with a nested <ul> list (advanced).

Tip: If you prefer SEO-friendly structure, link to category pages or label search URLs (/search/label/CategoryName) instead of plain tag pages.

2) Make the menu sticky (fixed while scrolling)

Many modern templates already support a sticky header. If Dia Root’s sticky header is disabled or missing, add this CSS (Theme → Customize → Advanced → Add CSS or Theme → Edit HTML inside <style>):

/* Simple sticky header */
.header-menu, .top-navigation {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 9999;
  background: inherit; /* Keep background consistent */
}

/* Add subtle shadow when sticky */
.header-menu.is-sticky, .top-navigation.is-sticky {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 200ms ease;
}

If you want the header to add the .is-sticky class only after the user scrolls (for nicer transitions), paste this small script just before </body> in Edit HTML:

<script>
document.addEventListener('scroll', function() {
  var header = document.querySelector('.header-menu, .top-navigation');
  if (!header) return;
  if (window.scrollY > 40) header.classList.add('is-sticky');
  else header.classList.remove('is-sticky');
});
</script>

3) Customize colors (background, links, hover)

You can use the theme color controls, but for exact control add CSS. Replace the hex values with your brand colors.

/* header background */
.header-menu {
  background-color: #0d6efd; /* brand / primary */
  backdrop-filter: blur(4px); /* optional glass effect */
}

/* menu links */
.header-menu a {
  color: #ffffff;
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 600;
}

/* hover & focus */
.header-menu a:hover,
.header-menu a:focus {
  color: #ffd700; /* hover color */
  background: rgba(255,255,255,0.03);
  outline: none;
}

/* active / current page */
.header-menu .active,
.header-menu a.active {
  border-bottom: 3px solid #ffd700;
}

/* mobile menu button (hamburger) */
.nav-toggle {
  color: #ffffff;
  font-size: 20px;
}

Where to paste: Theme → Customize → Advanced → Add CSS (safe) — or into your template’s <style> block.

4) Mobile behavior & responsive tips

Ensure the menu collapses into a hamburger on small screens. Dia Root usually has a responsive mobile menu.
If you need to tweak spacing on mobile:

@media (max-width: 768px) {
  .header-menu a { padding: 10px; font-size: 15px; }
  .header-menu { padding: 6px 12px; }
}

Make touch targets at least 44×44 px to be finger-friendly.

5) Dropdowns & accessible menus (brief)

If you add submenus, keep keyboard accessibility in mind. Example HTML structure for a simple dropdown:

<nav class="header-menu" role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="has-sub">
      <a href="/category">Categories</a>
      <ul class="sub-menu">
         <li><a href="/search/label/News">News</a></li>
         <li><a href="/search/label/Reviews">Reviews</a></li>
      </ul>
    </li>
  </ul>
</nav>

Minimal CSS to hide/show submenus:

.header-menu .sub-menu { display: none; position: absolute; background: #fff; }
.header-menu li.has-sub:hover .sub-menu { display: block; }

For true accessibility, add aria-haspopup, manage aria-expanded with small JS, and ensure keyboard navigation works. I can supply an accessible dropdown snippet if you need it.

6) Color selection best practices

Use a primary color + one accent (hover) color. Two or three colors max.
Ensure contrast: text must be legible (WCAG contrast ratio). Use dark text on light bg or white text on dark bg.
Keep hover/focus states visible (underline, color change, or background).
Avoid flashing animations; keep transitions subtle.

7) Testing checklist (before publishing)

Desktop menu: links work, hover & active states look correct.
Sticky behavior: header stays fixed and doesn’t overlap content.
Mobile: hamburger opens menu, spacing and font size are readable.
Social & SEO: menu links to important pages (About, Contact, Privacy).
Accessibility: links focusable by keyboard; visible focus state.
Performance: sticky header not causing layout reflows; images minimized.

Diaa Root Template