Blogger博客顶部菜单栏空白选项问题修复求助

Hey there, let’s get that annoying blank menu item sorted out! The reason deleting it temporarily works but it comes back on refresh is because your Blogger template is dynamically generating the menu from your site’s data (like labels or custom menu entries) every time the page loads. So we need to fix the root cause—either clean up the source data or add a check in the template code to skip empty/undefined items.

Here’s how to fix it:

1. Check for Empty Custom Menu Entries (Quick Win) #

First, if you’re using a custom menu widget (not auto-generated from labels):

• Go to your Blogger dashboard → Layout
• Find your menu widget (usually labeled "Navigation" or "Menu") and click Edit
• Look for any menu items where the "Name" field is blank or shows "undefined"
• Delete that empty entry, save the widget, and test your site again. This might solve it right away if the issue is a rogue empty menu item.

2. Fix the Template Code to Filter Undefined Items #

If the menu is auto-generated from your blog labels, or the above step didn’t work, we need to add a check in your template’s HTML to skip any undefined/empty labels:

1. Go to Blogger dashboard → Theme → Edit HTML
2. Use the search function (Ctrl+F) to find where your menu is generated. Look for code blocks like:

   <b:loop values='data:labels' var='label'>
     <li class='menu-item'>
       <a expr:href='data:label.url'><data:label.name/></a>
     </li>
   </b:loop>
   

3. Add a conditional check to only render menu items if the label name exists and isn’t "undefined":

   <b:loop values='data:labels' var='label'>
     <b:if cond='data:label.name != &quot;undefined&quot; and data:label.name != &quot;&quot;'>
       <li class='menu-item'>
         <a expr:href='data:label.url'><data:label.name/></a>
       </li>
     </b:if>
   </b:loop>
   

4. Click Save theme and reload your blog. The blank item should now be gone for good.

3. Check Responsive Mobile Menu Code #

If the blank item only shows up on mobile/zoomed views, your template might have a separate responsive menu component. Repeat step 2 but look for menu code wrapped in a media query (like @media screen and (max-width: 768px)). Add the same conditional check to that code block too.

4. Clear Browser Cache to Test #

After making changes, clear your browser’s cache (Ctrl+Shift+Del) and test both desktop (zoomed in) and mobile views to ensure the undefined item doesn’t reappear.

内容的提问来源于stack exchange，提问作者Programmics