Statis Menu
Hi,
I am trying to create a static logo/menu for my app but cant seem to get it to work.
I am editing the header top file and all i want to do is stop it from swapping between a mobile header and a normal one. I only have a small logo and 1 button but for the life of me, i cannot get it to stop hiding the main header. code below
It's driving me nuts! Please help
<!--begin::Header-->
<div id="kt_app_header" class="app-header">
<!--begin::Header container-->
<div class="app-container container-fluid d-flex align-items-stretch justify-content-between" id="kt_app_header_container">
<!--begin::Sidebar mobile toggle-->
<div class="d-flex align-items-center d-lg-none ms-n3 me-1 me-md-2" title="Show sidebar menu">
<div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_sidebar_mobile_toggle">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs015.svg-->
<span class="svg-icon svg-icon-2 svg-icon-md-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="
<path d="M21 7H3C2.4 7 2 6.6 2 6V4C2 3.4 2.4 3 3 3H21C21.6 3 22 3.4 22 4V6C22 6.6 21.6 7 21 7Z" fill="currentColor" />
<path opacity="0.3" d="M21 14H3C2.4 14 2 13.6 2 13V11C2 10.4 2.4 10 3 10H21C21.6 10 22 10.4 22 11V13C22 13.6 21.6 14 21 14ZM22 20V18C22 17.4 21.6 17 21 17H3C2.4 17 2 17.4 2 18V20C2 20.6 2.4 21 3 21H21C21.6 21 22 20.6 22 20Z" fill="currentColor" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Sidebar mobile toggle-->
<!--begin::Mobile logo-->
<div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
<a href="/"%20class="d-lg-none" target="_blank" rel="noopener noreferrer">
<img alt="Logo" src="images/logo.png" class="h-30px" />
</a>
</div>
<!--end::Mobile logo-->
<div class="app-sidebar-logo" id="">
<!--begin::Logo image-->
<a href="/" target="_blank" rel="noopener noreferrer">
<img alt="Logo" src="images/logo.png" class="h-50px app-sidebar-logo-default theme-light-show" />
<img alt="Logo" src="images/logo.png" class="h-50px app-sidebar-logo-default theme-dark-show" />
<img alt="Logo" src="images/logo.png" class="h-50px app-sidebar-logo-minimize" />
</a>
<!--end::Logo image-->
</div>
<!--begin::Header wrapper-->
<div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" id="kt_app_header_wrapper">
<!--begin::Menu wrapper-->
<div class="app-header-menu app-header-mobile-drawer align-items-stretch" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="250px" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true" data-kt-swapper-mode="{default: "append", lg: "prepend"}" data-kt-swapper-parent="{default: "#kt_app_body", lg: "#kt_app_header_wrapper"}">
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-lg-row my-5 my-lg-0 align-items-stretch fw-semibold px-5 px-lg-0" id="kt_app_header_menu" data-kt-menu="true">
...
</div>
Replies (1)
Hi,
Could you please provide more info? Which Metronic version, framework(HTML, angular, react or backend starter kits), build method(gulp or webpack), and demo you are using ?
If possible please use the latest Metronic v8.1.8 by downloading it from Metronic Downloads.
Regards.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
