Side Menu is hidden when opened main page at first time ASP.NET WebForms

Hello Support, I attach new theme to my application. built with ASP.NET Webforms. the sidebar menu is hidden when open the page at first time.

see video please: https://www.youtube.com/watch?v=WZOLQ2397qM

I test it in real host as you see in the video above.

Could you tell me if there's maybe javascript function to refresh menu at first time or something?

I use latest Metronic 8.2.8 version (Demo1)

my full <script>tag is :

<pre> <script> window.__bootstrap = { Tooltip: bootstrap.Tooltip }; $(document).ready(function () { // do stuff here. $.fn.bootstrapBtn = $.fn.button.noConflict(); // fix conflict between jquery ui and Bootstrap // activate current opened menu-item // Get the current page's pathname (path only, without the domain and protocol) var currentUrl = window.location.pathname; if (currentUrl == '/') { currentUrl = '/Default.aspx'; } // Find the first .menu-link whose href matches the current URL var firstLinkWithHref = $('.app-sidebar-menu .menu-link').filter(function () { var linkUrl = $(this).attr('href'); var linkListUrl = $(this).attr('data-href-list'); if (linkListUrl == null || linkListUrl.trim() == '') { // Hide List Breadcrumb $("#linkList").parent().hide(); } else { // Change href to data-href-list to allow visit list screen first. // KAMAL LATER } // If the link has a valid href and it matches the current URL, return true return linkUrl && (linkUrl === currentUrl || linkListUrl == currentUrl); }).first(); // Get the first matching link // If we found a matching link if (firstLinkWithHref.length > 0) { // Add the 'active' class to the matched link firstLinkWithHref.addClass('active'); // Traverse to the parent .menu-item var parentMenuItem = firstLinkWithHref.parents('.menu-item').first(); // skip first .menu-item as this (for <a>) var parentModuleSubMenuItem = parentMenuItem.parents('.menu-item').first(); var parentModuleMenuItem = parentModuleSubMenuItem.parents('.menu-item').first(); parentModuleSubMenuItem.addClass('here show'); parentModuleMenuItem.addClass('here show'); } var json = '<%=Newtonsoft.Json.JsonConvert.SerializeObject(ExaCloud.FExaAccounts.CurrentTheme)%>'; const theme = JSON.parse(json); ApplyTheme(theme); // Keep Session Alive setInterval(function () { fetch('/KeepSessionAlive.aspx') .then(response => console.log('Session refreshed!')) .catch(error => console.error('Error keeping session alive:', error)); }, 19 * 60 * 1000); // Ping every 19 minutes <% if (ExaCloud.FExaAccounts.UserLang == 2) { %> setRtlMode(); <% } else { %> setLtrMode(); <% } %> }); function ChangeLogo() { var logoBig = document.getElementById('logoBig'); var themeColor = $('body').attr('data-kt-app-layout'); if (themeColor == 'light-sidebar') $(logoBig).attr('src', '/logos/default-white.png'); else $(logoBig).attr('src', '/logos/default-dark.png'); } function openReportDialog(reportPath, reportSelection) { const url = "/Report.aspx?reportPath=" + reportPath + "&reportSelection=" + reportSelection; window.open(url, '_blank'); } function MessageBox(message, title, bsMessageColor) { if (!title) title = 'Alert'; if (!message) message = 'No Message to Display.'; if (!bsMessageColor) bsMessageColor = 'primary'; message = message.replace(/\n/g, '<br>'); // Check if a modal is already open, prevent opening a new one if ($('#customModal').length > 0 && $('#customModal').hasClass('show')) { return; // Modal is already open, do nothing } // Check if bsMessageColor needs dark text let textClass = (bsMessageColor === 'secondary' || bsMessageColor === 'light') ? '' : 'text-white'; let buttonStyle = (bsMessageColor === 'secondary' || bsMessageColor === 'light') ? '' : ''; $('body').append(` <div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="modalTitle"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header bg-${bsMessageColor}"> <h5 class="modal-title ${textClass}">${title}</h5> <button type="button" class="btn-close" ${buttonStyle} data-bs-dismiss="modal"></button> </div> <div class="modal-body">${message}</div> <div class="modal-footer"> <button type="button" class="btn btn-${bsMessageColor}" data-bs-dismiss="modal">OK</button> </div> </div> </div> </div> `); var modalElement = document.getElementById('customModal'); var modal = new bootstrap.Modal(modalElement); // Remove modal from DOM after it is closed modalElement.addEventListener('hidden.bs.modal', function () { modalElement.remove(); }); modal.show(); } function CallThemeLight() { ResetMenuColor(); cbGeneral.PerformCallback('Theme|light-sidebar'); } function CallThemeDark() { ResetMenuColor(); cbGeneral.PerformCallback('Theme|dark-sidebar'); } function OpenWindow(url, width = 1024, height = 650) { window.open(url, '_blank', 'width=' + width + ',height=' + height + ',scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); } function ChangeMenuColor(menuBackColor, menuForeColor, menuActiveColor, menuScrollbarColor) { $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title").attr('style', 'color:' + menuForeColor); $("[data-kt-app-layout=dark-sidebar] .app-sidebar").attr('style', 'background-color:' + menuBackColor); $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet").attr('style', 'background-color:' + menuForeColor); $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active").attr('style', 'background-color:' + menuActiveColor); // Scrollbar only works via added <style> tag $('<style>') .prop('type', 'text/css') .attr('id', 'dynamic-scrollbar-style') // Add an ID to identify it .html('[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover, [data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover { scrollbar-color: ' + menuScrollbarColor + ' transparent; }') .appendTo('head'); } function ResetMenuColor() { $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title").attr('style', ''); $("[data-kt-app-layout=dark-sidebar] .app-sidebar").attr('style', ''); $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet").attr('style', ''); $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active").attr('style', ''); $('#dynamic-scrollbar-style').remove(); } function ChangeTheme(name) { cbGeneral.PerformCallback('Theme|' + name); } function ApplyTheme(Theme) { $('body').attr('data-kt-app-layout', Theme.MetronicLayout); ChangeLogo(); if (Theme.Name != 'dark-sidebar' && Theme.Name != 'light-sidebar') ChangeMenuColor(Theme.MenuBackColor, Theme.MenuForeColor, Theme.MenuActiveColor, Theme.ScrollBarColor); } function setRtlMode() { var link1 = document.getElementById("maincss"); link1?.setAttribute("href", "/assets/css/style.bundle.rtl.css"); var link2 = document.getElementById("plugincss"); link2?.setAttribute("href", "/assets/plugins/global/plugins.bundle.rtl.css"); var link3 = document.getElementById("fontcss"); link3.setAttribute("href", "https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap"); document.documentElement.setAttribute("dir", "rtl"); document.documentElement.setAttribute("direction", "rtl"); document.documentElement.setAttribute("style", "direction:rtl"); } function setLtrMode() { var link1 = document.getElementById("maincss"); link1?.setAttribute("href", "/assets/css/style.bundle.css"); var link2 = document.getElementById("plugincss"); link2?.setAttribute("href", "/assets/plugins/global/plugins.bundle.css"); var link3 = document.getElementById("fontcss"); link3.setAttribute("href", "https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700"); document.documentElement.removeAttribute("dir"); document.documentElement.removeAttribute("direction"); document.documentElement.removeAttribute("style"); } </script> </pre>