In my uat.safeguide.com, I have drop down menu. Here, because of icon size, alignemnt of names are not there. How can I do the alignment. I am attaching code snippet and also screen shot. foreach ($sub_subcategories as $subsub) { $subsub_icon = get_field('category_icon', 'category_' . $subsub->term_id);$subcats_output .= '<li>';$subcats_output .= '<a href="' . esc_url(get_category_link($subsub->term_id)) . '">';if ($subsub_icon) {$subcats_output .= '<i class="' . esc_attr($subsub_icon) . '" aria-hidden="true"></i>';}$subcats_output .= '<span>' . esc_html($subsub->name) . '</span>';$subcats_output .= '</a></li>';}
I can see the alignment issue in your dropdown menu where the icons and text labels are not properly aligned. The problem is that different icons may have varying widths, causing the text to appear misaligned.
Here are several CSS solutions to fix the alignment:
dropdown-alignment.css
Recommended Solution: Use Solution 1 (Flexbox) as it's the most modern and flexible approach. Here's what you need to do:
- Add CSS classes to your PHP output:
$subcats_output .= '<li>';
$subcats_output .= '<a href="' . esc_url(get_category_link($subsub->term_id)) . '" class="dropdown-item">';
if ($subsub_icon) {
$subcats_output .= '<i class="' . esc_attr($subsub_icon) . ' dropdown-icon" aria-hidden="true"></i>';
}
$subcats_output .= '<span class="dropdown-text">' . esc_html($subsub->name) . '</span>';
$subcats_output .= '</a></li>';- Apply the corresponding CSS:
.dropdown-item {
display: flex;
align-items: center;
padding: 8px 16px;
text-decoration: none;
color: #fff;
}
.dropdown-icon {
width: 20px;
margin-right: 12px;
text-align: center;
font-size: 16px;
flex-shrink: 0; /* Prevents icon from shrinking */
}
.dropdown-text {
flex: 1;
}Key benefits of this approach:
- Fixed width for icons: All icons get the same space regardless of their actual width
- Consistent alignment: Text always starts at the same horizontal position
- Responsive: Works well on different screen sizes
- Accessible: Maintains proper semantic structure
The width: 20px on the icon ensures all icons take up the same horizontal space, and text-align: center centers them within that space. The margin-right: 12px provides consistent spacing between icons and text.
I can see the alignment issue is still present in your dropdown menu. Looking at the screenshots, the icons and text are not properly aligned vertically and horizontally. Let me provide you with specific CSS solutions that should work for your current implementation.
dropdown-alignment-fix.css
If the above CSS doesn't work, try this more aggressive approach:
dropdown-override.css
To implement this:
- Add this CSS to your theme's style.css file or create a custom CSS file
- Or add it through WordPress Customizer → Additional CSS
- Or use a plugin like "Easy Custom CSS"
If you're still having issues, you might need to modify your PHP code slightly:
foreach ($sub_subcategories as $subsub) {
$subsub_icon = get_field('category_icon', 'category_' . $subsub->term_id);
$subcats_output .= '<li class="dropdown-item-wrapper">';
$subcats_output .= '<a href="' . esc_url(get_category_link($subsub->term_id)) . '" class="dropdown-item-link">';
if ($subsub_icon) {
$subcats_output .= '<span class="dropdown-icon-wrapper"><i class="' . esc_attr($subsub_icon) . '" aria-hidden="true"></i></span>';
} else {
$subcats_output .= '<span class="dropdown-icon-wrapper"></span>'; // Empty placeholder for alignment
}
$subcats_output .= '<span class="dropdown-text-wrapper">' . esc_html($subsub->name) . '</span>';
$subcats_output .= '</a></li>';
}The key is using !important declarations to override any existing styles that might be interfering with the alignment. Try the first CSS solution first, and if that doesn't work, use the more aggressive second approach.