Footer Layout Optimization

February 20, 2025 · AI Conversations

User

Unser Service

@php(wp_nav_menu([
'theme_location' => 'footer_solutions',
'menu_class' => 'nav flex-column',
'container' => false,
'items_wrap' => '%3$s'
]))

Karriere

{{–
@php(wp_nav_menu([
'theme_location' => 'footer_career',
'menu_class' => 'nav flex-column',
'container' => false,
'items_wrap' => '%3$s'
]))
–}}

Über Uns

@php(wp_nav_menu([
'theme_location' => 'footer_agency',
'menu_class' => 'nav flex-column',
'container' => false,
'items_wrap' => '%3$s'
]))

Gebrauchtfahrzeuge

make footer colos mobile stack

Assistant

You can modify the layout to ensure the footer columns stack properly on mobile by using Bootstrap’s responsive column classes. Update the `col` classes like this:

### Solution:

<div class="col-12 d-flex flex-wrap">
    <div class="footer-menu footer-menu-solutions col-12 col-md-3">
        <header>
            <h5 class="elementor-heading-title">Unser Service</h5>
        </header>
        <ul class="list-unstyled">
            @php(wp_nav_menu([
                'theme_location' => 'footer_solutions',
                'menu_class' => 'nav flex-column',
                'container' => false,
                'items_wrap' => '%3$s'
            ]))
        </ul>
    </div>

    <div class="footer-menu footer-menu-solutions col-12 col-md-3">
        <header>
            <h5 class="elementor-heading-title">Karriere</h5>
        </header>
        {{-- <ul class="list-unstyled">
            @php(wp_nav_menu([
                'theme_location' => 'footer_career',
                'menu_class' => 'nav flex-column',
                'container' => false,
                'items_wrap' => '%3$s'
            ]))
        </ul> --}}
    </div>

    <div class="footer-menu footer-menu-solutions col-12 col-md-3">
        <header>
            <h5 class="elementor-heading-title">Über Uns</h5>
        </header>
        <ul class="list-unstyled">
            @php(wp_nav_menu([
                'theme_location' => 'footer_agency',
                'menu_class' => 'nav flex-column',
                'container' => false,
                'items_wrap' => '%3$s'
            ]))
        </ul>
    </div>

    <div class="footer-menu footer-menu-solutions col-12 col-md-3">
        <header>
            <h5 class="elementor-heading-title">Gebrauchtfahrzeuge</h5>
        </header>
        <!--<ul class="list-unstyled">
            @php(wp_nav_menu([
                'theme_location' => 'footer_solutions',
                'menu_class' => 'nav flex-column',
                'container' => false,
                'items_wrap' => '%3$s'
            ]))
        </ul>-->
    </div>
</div>

### Explanation:
– **`col-12`**: Ensures full width on mobile.
– **`col-md-3`**: Creates four equal columns on medium (≥768px) and larger screens.
– **`d-flex flex-wrap`**: Ensures the columns wrap properly when space is limited.

Now, on mobile, all footer sections will be stacked vertically, and on larger screens, they will appear as four equal columns. 🚀

Footer Layout Optimization

Leave a Comment Cancel