<nav> structure containing your link labels right beneath your header container, and inject responsive flexbox CSS rules before the closing </b:skin> tag to center the links across all desktop and mobile devices.Stop burying your primary labels inside a long, vertical sidebar widget.
When you force visitors to scroll down just to see your core content topics, you destroy your user experience metrics and invite a higher bounce rate.
Create horizontal category menu bar in Blogger
Moving your category list into a sleek, horizontal navigation bar right below your blog header changes the entire layout dynamic.
It maximizes your "above the fold" real estate—the high-value screen space visible instantly without scrolling.
In addition, it allows you to populate your sidebar with high-converting elements like email signups, search bars, or premium ad slots instead.
Part One: Add the HTML menu structure
First, we need to place the structural block where the layout links will actually live.
We use a standard container class so we can target it easily with CSS overrides later.
Step 1: Go to your Blogger dashboard and click on Theme.
Step 2: Click the down arrow next to the "Customize" button and select Edit HTML.
Step 3: Search (Ctrl + F) for your main header closure wrapper tag (usually </b:section> or right below the Header1 container blocks) and paste this clean structural HTML code directly underneath it:
<!-- The Horizontal Navigation Menu -->
<div class='navbar'>
<a class='active' href='#'>Home</a>
<a href='#'>Search</a>
<a href='#'>Contact</a>
<a href='#'>Login</a>
</div>(Swap out the # symbols with your actual Blogger label page URLs, and rename the placeholder text to match your primary content categories.)
Part Two: Inject the responsive styles
Right now, your links are just a raw vertical list.
To stretch them edge-to-edge across the screen and make them responsive on smartphones, we need to inject structural styles.
Step 4: Remain inside your Edit HTML code editor and search for this exact tag: ]]></b:skin>
Step 5: Paste the following responsive CSS block directly before that line:
.navbar {
width: 100%;
background-color: #555;
display: flex; /* Activates Flexbox grid scaling */
flex-wrap: nowrap; /* Prevents accidental line-wrapping on desktop */
justify-content: space-between; /* Spreads items evenly across the width */
box-sizing: border-box;
}
/* Style the navigation links */
.navbar a {
flex-grow: 1; /* Forces all links to share remaining width equally */
padding: 12px 6px; /* Slightly reduced horizontal padding to stop blowouts */
color: white;
text-decoration: none;
font-size: 17px;
text-align: center;
box-sizing: border-box; /* Includes padding inside width calculations */
white-space: nowrap; /* Keeps labels on a single line */
}
/* Add a background hover shift on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Highlight the current/active link page */
.navbar a.active {
background-color: #4CAF50;
}
/* Mobile Breakpoint - Safely stacks links vertically on small smartphone displays */
@media screen and (max-width: 600px) {
.navbar {
flex-direction: column; /* Shifts grid layout from row to stack */
}
.navbar a {
width: 100%;
text-align: left;
padding: 14px 15px; /* Larger hit target area for thumbs */
border-bottom: 1px solid #666;
}
}Part Three: Sizing the container alignment
Once you click save, preview your blog on both desktop and mobile viewports.
If the newly created navigation bar floats too far left or extends beyond the borders of your main article content, it means your template's layout wrappers are constraining the site widths.
To align your newly added element perfectly with the structural borders of your main content and sidebars, follow the next layout styling sequence: Blogger layout wrapper styles: how to align elements cleanly.