Free · Fast · Privacy-first

CSS Flexbox Navbar

A navigation bar with a logo on the left and links on the right is one of the most common patterns on the web. It is also exactly the problem Flexbox was built to solve. The logo-left, links-right layout requires distributing two groups to opposite edges of a container, which justify-content: space-between does in a single declaration. FixTools generates the complete navbar ruleset and its responsive column variant for mobile, so you copy one block, paste it onto your nav element, and the layout works at every viewport without floats, absolute positioning, or per-link width math. The same generated CSS supports two-group navbars (logo and links), three-group navbars with a search bar in the middle, and stacked mobile variants triggered by a single media query.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates the space-between Flexbox container for logo-left links-right

🔒

Includes align-items: center for vertical alignment of navbar content

✨

Produces responsive column-direction variant for mobile breakpoints

CSS Tool

Grid Flexbox Builder

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Grid Flexbox Builder

100% Free · No account · Works on any device

Why Flexbox Is the Standard for Navigation Bar Layout

Flexbox is the standard layout system for navigation bars because the logo-left, links-right pattern is precisely the problem justify-content: space-between was designed to solve. Before Flexbox, achieving this layout required floating the logo left and the links right, then clearing the float on the containing element. Floated navbars required explicit heights on the container or an overflow: hidden hack to prevent the container from collapsing. Vertical centring of navbar content inside a floated layout required additional fixed heights and margin calculations. Every approach required several lines of CSS to produce a layout that a designer would sketch in one stroke. Flexbox replaces all of it with three properties: display: flex, justify-content: space-between, and align-items: center.

The pattern works because justify-content: space-between pushes the first child to the left edge and the last child to the right edge of the container, with all available space in between them. If the nav contains a logo element and a links list as direct children, the logo goes left and the links go right automatically. align-items: center vertically centres both children within the container height, which means setting the nav height is enough to control the vertical position of all navbar content. Adding gap between the navbar children creates consistent spacing for navbars with more than two sections, such as a logo, a search bar, and a links group arranged left to centre to right.

A responsive navbar switches from horizontal to vertical at narrow breakpoints. At small screen widths, flex-direction: column stacks the logo and links vertically. justify-content changes from space-between to flex-start to prevent the logo and links from spreading to the top and bottom of the container. align-items changes from center to flex-start to left-align all items in the stacked layout. These three property changes, applied inside a max-width media query, transform the horizontal desktop navbar into a stacked mobile navbar without changing any of the child element CSS. The hamburger menu toggle pattern requires JavaScript, but the layout reflow between horizontal and vertical is pure CSS.

There are a few accessibility considerations that turn a working navbar into a good navbar. Wrap the entire navigation in a semantic nav element so screen readers announce it as a navigation landmark and keyboard users can jump straight to it with their screen reader shortcut. Inside the nav, use an unordered list of links rather than a row of bare anchor tags so assistive technology reports the link count up front. For the hamburger toggle on mobile, use a real button element with aria-expanded that flips between true and false as the menu opens and closes, and aria-controls pointing to the id of the links container. Without these attributes, the menu still works visually but screen reader users cannot tell whether it is currently open or what it controls when they activate the button.

MDN: CSS Flexible Box Layout CSS Tricks: A Complete Guide to Flexbox

How to use this tool

💡

Open the Flexbox Generator, set flex-direction to row, justify-content to space-between, and align-items to center. Copy the output and apply it to your nav container element. For mobile, add a media query that switches to flex-direction: column.

How It Works

Step-by-step guide to css flexbox navbar:

1
Set up the row layout
In the generator, set flex-direction to row, justify-content to space-between, and align-items to center. The preview shows two groups pushed to opposite edges of the container.
2
Set the navbar height and padding
Add a height or padding value to the container to control the navbar's vertical size. align-items: center vertically centres the logo and links within this height automatically.
3
Add gap for multi-section navbars
If the navbar contains three or more groups (logo, search, links), add a gap value. gap applies consistent spacing between all direct children without margin hacks.
4
Copy the desktop and mobile rulesets
Click Copy CSS to copy the desktop row-direction ruleset. Add the mobile variant inside a @media (max-width: 768px) block, switching to flex-direction: column and updating justify-content and align-items.

Real-world examples

Common situations where this approach makes a real difference:

Standard brand navbar with logo and links

A marketing site uses a Flexbox nav container with justify-content: space-between and align-items: center. The nav element contains a logo anchor as the first child and a link list as the last child. The logo sits at the left edge and the links at the right edge at any container width. No floats, no absolute positioning, and no explicit width calculations are required.

Three-section navbar with search bar

A web application navbar contains a logo group, a centred search input, and a user account menu. A Flexbox container with justify-content: space-between distributes all three sections. The search input group receives flex: 1 and a max-width: 400px to fill the centre without taking up the full available space. The logo and account menu maintain their natural widths at the edges.

Sticky navbar on a documentation site

A documentation site uses a sticky Flexbox navbar with position: sticky, top: 0, and a background colour. The navbar contains a logo and a right-aligned group with a search button and a GitHub link. justify-content: space-between handles the distribution; align-items: center handles the vertical alignment. The sticky positioning works independently of the Flexbox layout.

Mobile-responsive navbar with collapse

A navbar uses Flexbox with flex-direction: row and space-between on desktop. Below 768px a media query switches to flex-direction: column with justify-content: flex-start. When a hamburger button is toggled, a class adds display: flex to the links group; without it, links are hidden. The layout reflow between horizontal and vertical is entirely CSS; only the toggle behaviour requires JavaScript. Adding aria-expanded to the hamburger button and aria-hidden to the collapsed link list keeps assistive technology in sync with the visual state of the menu.

When to use this guide

Use this when building a horizontal navigation bar where a logo or brand name sits at the left edge and a navigation link group sits at the right edge, with automatic vertical centring.

Pro tips

Get better results with these expert suggestions:

Wrap link groups in a single container for cleaner space-between behaviour

justify-content: space-between distributes all direct children. If the nav has a logo, three individual link anchors, and a button, space-between spreads all five elements across the container. Wrap the links and button in a single div so space-between has exactly two children: the logo and the link group. This produces the intended two-region layout.

Use flex-shrink: 0 on the logo to prevent it from compressing

Flexbox shrinks items when the container is too narrow. A logo that shrinks below its natural size breaks the brand mark. Add flex-shrink: 0 to the logo element or its anchor to prevent it from being compressed. The links group can shrink or wrap as needed while the logo stays at full size.

Test the navbar at container widths between desktop and mobile

At medium viewport widths (600px to 900px), the navbar may be too cramped for horizontal layout but too wide for the stacked mobile layout. This mid-range is where navbar layouts most often break. Set your media query breakpoint at the width where the horizontal layout first looks crowded, not at a standard breakpoint that may be too wide or too narrow for your specific link count.

Set box-sizing: border-box on the navbar if using padding for height

If you set a height on the nav and add padding, padding adds to the total height unless box-sizing: border-box is set. Most CSS resets include border-box globally, but if your project does not, apply it explicitly to the nav element to prevent the navbar from becoming taller than intended.

FAQ

Frequently asked questions

Apply display: flex and justify-content: space-between to the nav container. Place the logo as the first direct child and the links list as the last direct child. justify-content: space-between pushes the first child to the left edge and the last child to the right edge with all available space between them. Add align-items: center to vertically centre both children within the navbar height.

In a row-direction Flexbox container, justify-content: space-between places the first child at the left edge and the last child at the right edge, distributing all remaining free space between them. For a navbar with two children (logo and links), this produces the logo-left, links-right layout at any container width without calculating margins or widths. With three children (logo, search, links), it distributes them across the full width with equal gaps.

Add align-items: center to the Flexbox nav container. This centres all direct children on the cross axis, which is vertical in a row-direction container. Set an explicit height or padding on the nav to give the container vertical space. align-items: center then positions the logo and links in the middle of that height automatically, regardless of the varying heights of different child elements.

Inside a max-width media query for small screens, change flex-direction to column, justify-content to flex-start, and align-items to flex-start on the nav container. This stacks the logo and links vertically, left-aligned, at narrow widths. The desktop styles remain active at wider viewports. The child elements need no changes at the breakpoint because the parent container handles the reflow.

Flexbox shrinks items to fit the container by default. If the total natural width of logo plus links exceeds the navbar width, items compress or overflow. Prevent this by wrapping links in a group and controlling the group width. Adding flex-shrink: 0 to the logo prevents logo compression. Adding overflow: hidden to the links group hides overflow on narrow screens if a toggle-based mobile menu is used.

Yes. A two-column Grid with grid-template-columns: auto 1fr places the logo in the first column (sized to its content) and the links in the second (filling remaining space). Adding justify-items: end to the container right-aligns the links. For a two-region navbar, both Grid and Flexbox work; Flexbox is the conventional choice because the justify-content: space-between approach requires fewer properties and is widely understood.

Add a third direct child between the logo and links group. For a centred search bar, add flex: 1 and max-width to the search container to make it fill the centre space. With three children, justify-content: space-between distributes all three across the nav, not just the first and last. If the centred element is not truly centred, use CSS Grid with three explicit columns (auto, 1fr, auto) for exact centring.

No, for the layout itself. A Flexbox navbar that switches from horizontal to vertical at a breakpoint is entirely CSS using flex-direction and a media query. JavaScript is only needed if you want a hamburger toggle button to show and hide the links on mobile, which requires toggling a class or style. The layout reflow between horizontal and vertical is pure CSS, and the same CSS handles the sticky-on-scroll behaviour when you add position: sticky and top: 0 to the nav container.

Add position: sticky and top: 0 to the nav container, plus a background color so content scrolling underneath does not show through. The Flexbox layout inside the nav is unaffected because sticky positioning operates on the outer box, not on the children. Set a z-index above the page content (typically 10 to 50 is enough) so the sticky bar covers content beneath it rather than the other way around. If you have an animated drop shadow that should appear only when the nav is stuck, attach a small IntersectionObserver to a sentinel element placed just above the nav so the shadow class is added when the sentinel scrolls offscreen.

align-items: center on the nav container handles this automatically because Flexbox vertically centers all direct children on the cross axis. Even when the logo image is 40 pixels tall and the link text is 18 pixels tall, both groups appear centered within the nav height. The nav height comes from either an explicit height value or vertical padding on the container. If the logo image has unintended whitespace above or below it, set display: block on the img element to remove the inline baseline gap that browsers add to images by default.

Related guides

More use-case guides for the same tool:

CSS Flexbox Generator

CSS Flexbox Centering

CSS Flexbox Wrap

Related tools

Other tools you might find useful:

CSS Formatter

Format the generated layout CSS for readability.

CSS Animation Builder

Add entrance animations to the grid items you laid out.

HTML Element Builder

Build the HTML structure that your grid or flexbox layout applies to. For accessibility-focused teams, pair Flexbox nav structure with proper ARIA landmarks and skip-to-content links so keyboard users can bypass the navbar quickly when needed. For mobile-first navbar designs, consider the burger menu pattern with a hidden nav that expands on mobile. Flexbox handles the alignment and spacing of the expanded menu items as cleanly as it does the desktop navbar. Sticky navbars combine well with Flexbox: use position: sticky with top: 0 plus a flex container for the nav items. Test the sticky behavior at all breakpoints since some Safari versions have known quirks with sticky inside transformed parents. Modern flex-driven navbar implementations often use grid-template-columns with auto-fit instead, especially when navbar items need consistent widths across the row. Both Flexbox and Grid handle navbar layouts well, with Flexbox preferred for content-driven sizing and Grid for fixed-column structures. For responsive design, pair Flexbox navbars with container queries when supported. Container queries let the navbar adapt to its allocated width rather than the viewport width.

Ready to get started?

Open the full Grid Flexbox Builder — free, no account needed, works on any device.

Open Grid Flexbox Builder →

Free · No account needed · Works on any device