宽屏效果

窄屏效果：

DEMO：240820

HTML：创建top.zhg，复制下面代码，用$frame_top调用即可，注意事项：func-search改成func_search下划线。

<div class="top">
    <div class="container-flush">
        <div class="row mx-0 justify-content-lg-between align-items-strech flex-nowrap">
            <div class="logo col-auto mr-xs-5 mr-sm-0 py-4">$func_logo(slogan=1)$</div>
            <div class="col d-flex px-0 justify-content-end align-items-center">
                <div class="d-none d-xl-flex">
                    <div class="row mr-0 me-0 align-items-center" id="navbar">
                        <div class="menu col low ul-fst-sec li-hover-sec hover-white">$func_menu(pos=0,sub=1,divi=none)$
                        </div>
                        <div class="col-auto align-items-center"><i class="fa fa-search"></i></div>
                    </div>
                </div>
                <toggler class="d-flex px-3 h-100 align-items-center bg-fst white d-xl-none"><i
                        class="fa fa-2x fa-list mr-0 me-0"></i></toggler>
            </div>
        </div>
    </div>
    <div id="toggler"></div>
</div>
<div class="so d-none">$func-search(para=search,so=1,table=1)$</div>

SCSS:

.top {
    background-color: rgba($gray-100, .3);

    .menu {
        ul {
            li {

                &.on,
                &:hover {
                    background-color: transparent;
                }

                a {
                    padding-left: 20px;
                    padding-right: 20px;
                }

                ul {
                    li {
                        background-color: transparent !important;
                    }
                }
            }
        }
    }

    #toggler {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: $fst;
        z-index: 10000;
        padding-left: 20px;
        padding-right: 20px;

        menu {
            ul {
                li {
                    border-bottom: 1px solid rgba($gray-100, .3);

                    &:last-child {
                        border-bottom: 0;
                    }

                    a {
                        padding: 1rem 2rem;
                        font-size: 1.6rem;
                        color: $gray-300;

                        &:hover {
                            color: white;
                        }
                    }
                }
            }
        }

    }
}

.search {
    form {
        display: flex;
        flex: 1;
        flex-flow: row nowrap;

        #kw {
            display: flex;
            flex: 1;
            border: 1px solid rgba($fst, .5);
        }

        .SearchType {
            display: none;
        }
    }
}

@include media-breakpoint-up(xl) {
    .top {
        background-color: #fff;
        width: 100%;
        z-index: 10000;

        .menu {
            ul {
                li {
                    a {
                        font-size: 1.6rem;
                        font-weight: 500;
                        white-space: nowrap;
                    }
                }

                ul {
                    background-color: white;
                    box-shadow: 0 3px 3px rgba($gray-100, .5);

                    li {
                        border-bottom: 1px solid $gray-200;

                        &:last-child {
                            border-bottom: 0;
                        }

                        &:hover {
                            background-color: $fst !important;

                            a {
                                color: white;

                                &::after {
                                    position: absolute;
                                    display: inline-flex;
                                    padding: 5px;
                                    content: "\f061";
                                    right: 5px;
                                }
                            }
                        }

                        a {
                            padding: 15px 80px 15px 20px !important;
                            font-size: 1.4rem;
                            font-weight: 100;
                        }
                    }
                }
            }
        }
    }


    .logo {

        a {
            img {
                max-height: 60px;
                object-fit: contain;
            }
        }
    }

    i.fa-search {
        display: inline-flex;
        font-size: 2rem;
        font-weight: 100;
        cursor: pointer;
    }
}

$.getScript("userthemes/240802/js/hondy.animate.js");
$(function () {
    scroll();
    $(window).resize(function () {
        $(".so").addClass("d-none");
        $("#toggler").slideUp();
        $("body").css("overflow-y", "auto");
        scroll();
    });
})

const scroll = function () {
    if ($(window).width() > 1200) {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 0) {
                $(".top").addClass("position-fixed shadow-down");
            } else {
                $(".top").removeClass("position-fixed shadow-down");
                $(".top").addClass("position-relative");
            }
        });
        $(".top .fa-search").click(function () {
            var o = $(".so");
            if (o.hasClass("d-none")) {
                o.removeClass("d-none");
                $(".so").toggle();
            }
            o = $(".top .container-flush");
            $(".so").toggle();
            $(".so").css({
                "top": $(".top").height(),
                "right": $(window).width() - o.offset().left - o.width()
            });
        })
    }
    else
    {
        $("#toggler").html('<div class="text-right mt-3"><i class="fa fa-2x fa-close white"/></div><div class="search my-5">'   $(".so .Margin").html()   "</div>"   $(".menu").html());
        $("toggler").click(function () {
            $("#toggler").slideDown();
            $("body").css({
                "overflow-y": "hidden"
            });
        });
        $("body").on("click", "i.fa-close", function () {
            $("#toggler").slideUp();
            $("body").css({
                "overflow-y": "auto"
            });
        });
    }
}