WordPress子菜单两列布局问题及移动端适配优化求助

Problem Recap #

You're building a two-column submenu for your Blog >> Mountains section in WordPress, but hit these snags:

• Long menu items can't fit the container properly
• On mobile, only part of the right column is visible
• Previous attempts either broke mobile display or caused left-column overflow/text centering issues

Refined CSS Solution (CSS Only) #

Let's build on the column-based approach you tried with SA Bappy, fixing the overflow and alignment problems, plus adding mobile responsive support:

/* Base two-column submenu styling */
.sub-menu-columns ul.sub-menu {
  column-count: 2; /* Split into 2 columns */
  column-gap: 20px; /* Adjust spacing between columns for better readability */
  text-align: left; /* Force text left-aligned instead of centered */
  width: 500px; /* Set a fixed width for the submenu container (adjust as needed) */
  padding: 15px; /* Add inner padding to prevent content touching edges */
  box-sizing: border-box; /* Ensure padding doesn't expand the container width */
}

/* Control individual list item sizing */
.sub-menu-columns .sub-menu li {
  max-width: 100%; /* Let items take full width of their column */
  line-height: 1.5; /* Adjust line height for long text to wrap nicely */
  break-inside: avoid; /* Prevent list items from splitting across columns */
}

/* Fix submenu positioning to avoid screen overflow */
ul#menu-main-menu ul ul {
  right: unset;
  left: 100%; /* Position submenu to the right of parent item */
  position: absolute; /* Ensure proper positioning context */
  top: 0;
}

/* Mobile responsive adjustment */
@media (max-width: 768px) {
  .sub-menu-columns ul.sub-menu {
    column-count: 1; /* Switch to single column on mobile */
    width: 100%; /* Take full width of mobile screen */
    left: 0 !important; /* Reset positioning to avoid off-screen content */
    right: 0 !important;
  }
}

Explanation of Key Fixes #

• Text Alignment & Overflow: Adding text-align: left fixes the centered text issue, while box-sizing: border-box ensures padding doesn't make the container wider than intended.
• Column Stability: break-inside: avoid stops long menu items from being split between two columns, keeping each item intact.
• Mobile Adaptation: The media query switches to a single column on screens smaller than 768px, resets positioning to keep the menu within the viewport, and uses full width for better mobile readability.

Quick Tip for Beginners #

Add this CSS to your WordPress theme's Customizer > Additional CSS section—this way you won't lose changes when updating your theme. Test on different screen sizes to tweak values like width, column-gap, or padding to match your site's design.

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