NAVIGATION

Centered Logo Navbar

A balanced navigation layout with menu links on both sides of a centered logo. It uses simple HTML and CSS and works well for modern brand websites.

HTML
<nav class="center-logo-navbar" aria-label="Primary Navigation">

  <div class="center-logo-nav-side">
    <a href="#">Home</a>
    <a href="#">Components</a>
  </div>

  <a href="#" class="center-logo-brand">
    <span>&lt;/&gt;</span>
    CodeRipple
  </a>

  <div class="center-logo-nav-side">
    <a href="#">Playground</a>
    <a href="#">Blog</a>
  </div>

</nav>
CSS
.center-logo-navbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;

  padding:14px 22px;

  background:#0b1423;
  border:1px solid #1c2a40;
  border-radius:16px;
}

.center-logo-nav-side{
  display:flex;
  align-items:center;
  gap:18px;
}

.center-logo-navbar a{
  color:#aab4c8;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:color .25s ease;
}

.center-logo-navbar a:hover{
  color:#22d3ee;
}

.center-logo-brand{
  display:flex;
  align-items:center;
  gap:8px;

  color:#ffffff !important;
  font-size:18px !important;
  font-weight:800 !important;
}

.center-logo-brand span{
  color:#22d3ee;
  font-family:Consolas, Monaco, monospace;
}

How This Centered Logo Navbar Works

The Centered Logo Navbar is a horizontal navigation component that places the CodeRipple brand between two groups of links. Home and Components appear on the left, while Playground and Blog appear on the right. This creates a balanced navigation structure with the brand acting as the central visual element.

The HTML uses a semantic nav element with aria-label="Primary Navigation". Inside it are two .center-logo-nav-side containers and one .center-logo-brand anchor. Separating the links into two containers is what makes it possible to position navigation options on both sides of the brand without additional JavaScript.

The main .center-logo-navbar uses Flexbox for alignment. display: flex places the three direct children in a row, while align-items: center keeps them vertically aligned. justify-content: center centers the complete navigation group within the navbar.

A 34px gap separates the left link group, brand, and right link group. Each .center-logo-nav-side is also a flex container, but it uses a smaller 18px gap between its two links. This creates two levels of spacing: wider separation around the brand and tighter spacing between related navigation links.

The navbar has 14px 22px padding, a dark #0b1423 background, a #1c2a40 border, and 16px rounded corners. There are no shadows, gradients, pseudo-elements, or backdrop effects in the supplied CSS, so the overall appearance stays relatively simple.

All anchors inside the navbar initially receive shared typography and interaction styles. They use the muted #aab4c8 color, a 14px font size, a font weight of 600, and no text decoration. Their color changes through a .25s ease transition.

Hovering over a link changes its color to cyan #22d3ee. The hover effect applies to anchors throughout the navbar, although the brand has its own white text rule with !important, so its main text remains white rather than adopting the shared cyan anchor color.

The .center-logo-brand is itself a flex container. It aligns the </> symbol and CodeRipple name horizontally with an 8px gap. The brand overrides the shared anchor styles with white text, an 18px font size, and a font weight of 800. The larger size and heavier weight help distinguish it from the surrounding navigation options.

The </> symbol receives separate styling through .center-logo-brand span. It uses the cyan #22d3ee accent and a monospace font stack of Consolas, Monaco, and finally the generic monospace family. This gives the developer-style symbol a different visual character from the brand name.

The component does not use JavaScript. Its published JavaScript field is empty, so there is no menu toggling, active-link switching, click handling, or dynamic positioning. All layout and hover behavior comes directly from CSS. For more detail about the layout system used here, see the MDN CSS flexible box layout documentation.

There is also no media query in the supplied CSS. The component does not switch to a hamburger menu or explicitly wrap its three main sections at a particular breakpoint. Its current implementation is therefore focused on a straightforward centered horizontal arrangement.

Customizing the Centered Logo Navbar

The component has a compact structure, making its branding, navigation labels, spacing, and colors easy to adapt without changing its basic layout.

  • Replace CodeRipple and the </> symbol with your own brand name and mark.
  • Change Home, Components, Playground, and Blog to match the primary destinations on your website.
  • Adjust the main 34px gap to change the amount of space around the centered brand.
  • Modify the 18px side-group gap to control spacing between navigation links.
  • Change the navbar’s 14px 22px padding to create a taller, shorter, wider, or tighter navigation surface.
  • Replace #0b1423 and #1c2a40 to customize the background and border colors.
  • Change the cyan #22d3ee value to use another accent for link hover states and the brand symbol.
  • Adjust the brand’s 18px font size or 800 font weight to make it more or less prominent.

Where to Use This Centered Logo Navbar

This layout works well when branding should occupy the visual center while a small number of navigation destinations remain available on both sides.

  • Portfolio and personal websites
  • Developer resource sites
  • Creative studio websites
  • Product landing pages
  • Component and design showcases
  • Simple desktop-oriented website headers

The split navigation structure works best when both sides contain a manageable number of links. If a site needs its navigation to remain visible during longer scrolling pages, the Sticky Navbar provides a related persistent header pattern.

Frequently Asked Questions

Does the Centered Logo Navbar use JavaScript?

No. The published component has no JavaScript. Its positioning, spacing, typography, and hover states are handled entirely through CSS.

How is the logo positioned between the navigation links?

The navbar has three direct flex items: the left navigation group, the brand, and the right navigation group. Flexbox centers this complete group and uses a 34px gap between those sections.

Does the Centered Logo Navbar have a mobile layout?

No dedicated mobile layout is included. The supplied CSS does not contain a media query, hamburger button, or breakpoint-specific navigation behavior.

Why does the brand look different from the other links?

The .center-logo-brand rule gives it white text, an 18px font size, and an 800 font weight. Its </> span is separately styled in cyan with a monospace font stack.

The Centered Logo Navbar uses nested Flexbox containers, deliberate spacing, and separate brand styling to create a balanced navigation row without requiring JavaScript or complex positioning.

Scroll to Top