网站菜单栏布局调整：从占整行到Logo与购物车间的实现方案

Hey there, let's get that header layout sorted for you! I know you want your menu to sit neatly between the logo and cart icon instead of taking up the entire row—here's a straightforward solution that combines CSS adjustments and HTML reordering:

1. Add Custom CSS for Flex Layout #

First, drop this CSS into your theme's customizer (under "Additional CSS") or your child theme's stylesheet. It sets up a flex container for the header to align items properly:

header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

@media screen and (max-width: 600px) { 
    .navbar-header { 
        width: 100% 
    } 
}

What this does:

• The flex layout makes the header elements (logo, menu, cart) line up in a horizontal row, with space distributed between them so they fill the header width without overlapping.
• The media query ensures the mobile view stays functional by forcing the navbar header to take full width on small screens, which keeps your mobile menu (like a hamburger) working as expected.

2. Reorder Your HTML Elements #

Next, you need to adjust the order of your header HTML to place the menu between the logo and cart. Your original structure had the cart section inside .navbar-header first—we need to rearrange things to this order:

1. Logo element
2. Main menu navigation
3. Shopping cart container

Here's an example of what the updated HTML should look like (swap in your actual theme's classes for logo/menu):

<div class="navbar-header">
    <!-- Your site logo comes first -->
    <div class="site-logo">
        <a href="/"><img src="your-logo-url.png" alt="Site Logo"></a>
    </div>

    <!-- Main menu navigation goes in the middle -->
    <nav class="main-nav">
        <!-- Your menu items (like <ul> with <li> links) go here -->
    </nav>

    <!-- Shopping cart stays last -->
    <?php if(th_is_woocommerce_activated()) { ?>
        <!-- Your existing cart icon/container code here -->
    <?php } ?>
</div>

Pro tip: Double-check that you're using your theme's actual class names for the logo and menu (they might not be site-logo or main-nav—look at your current code to match them exactly).

Once you've made these two changes, your menu should sit perfectly between the logo and cart on desktop, and the mobile view will still behave correctly. Test it out to make sure everything lines up as expected!

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