The website: https://bestdubaitours.com/ Issue #1: The responsive menu icon appears not to get CSS style for the first few seconds and appears below the main menu area. See "screen1" attached image file. Issue #2: The mobile menu icon appears in the correct place only if I am not logged in. It means, you all can see it correctly, but I am, as admin, no. When I am logged in, the icon goes up to the wp-admin top bar. See "screen2" attached image file. Issue #3: When I click on the menu icon, the menu area is jumping, I have no idea how to explain it, but you can try and see. I gave CSS style to the open area and I see it getting and losing style and don't understand when exactly it happens. See the "screen3" and "screen4" attached image files. This is the CSS: .mobile-menu-toggle .icon { cursor: pointer; } .mobile-menu-toggle { display: none; text-align: center; } .mobile-menu { display: none; } @media screen and (max-width: 750px) { #jquerycssmenu, .jquerycssmenu { display: none !important; } .mobile-menu-toggle { position: absolute; top: 3px; right: 0px; margin: 1rem; z-index: 99999; color: #9E0505; } .mobile-menu-toggle.active + .mobile-menu { display: block; text-align: center; color: #636363; background-color: #C7C7C7; } .mobile-menu-toggle.active + .mobile-menu li { padding: 5px; border: 1px solid #E1E1E1; } }
Well your first problem is that you're declaring everything in pixels, telling non-standard font-size users to go F*** themselves. Not an auspicious start. Of course it's the train wreck of incompetence known as turdpress, so the endless horde of "code for nothing" is doing you no favors either. From the endless pointless DIV for nothing, presentational classes, static style in the markup pissing away caching and parallelism... to your real issue, some garbage scripting only menu requiring the halfwitted scam that is jQuery, with the menu repeated more than once making non-visual navigation a nightmare. For someone actually versed in HTML or CSS to fix even the slightest problem, they'd first have to throw that entire mess in the trash and to start over from scratch. There is little to salvage on the coding side from that chazerei. Which is evident in the 94k of markup being used to deliver 5.27k of plaintext and a dozen content media, not even 12k of HTML's flipping job! Stunning example of how most of the code people use in their turdpress templates does nothing more than sucker, hoodwink, and bamboozle people who just don't know any better.
Issue #1: It seems like the CSS for the responsive menu icon is not being applied initially. This could be due to the CSS file not being loaded properly or the selector being overwritten by another style rule. To fix this, you can try adding the !important keyword to the CSS rule for the icon styles. Example: .mobile-menu-toggle .icon { cursor: pointer; color: #fff !important; /* Add other necessary styles */ } Issue #2: It looks like the mobile menu icon is getting affected by the WordPress admin bar when you're logged in. To fix this, you can try adding a higher z-index value to the mobile menu toggle. Example: .mobile-menu-toggle { position: absolute; top: 3px; right: 0px; margin: 1rem; z-index: 100000; /* Increase z-index value */ color: #9E0505; } Issue #3: The jumping effect on the menu area could be caused by changes in the element's dimensions when the menu is opened or closed. One solution is to give a fixed height to the menu container to prevent it from changing size. Example: .mobile-menu { display: none; height: 200px; /* Add fixed height / / Add other necessary styles */ } .mobile-menu-toggle.active + .mobile-menu { display: block; text-align: center; color: #636363; background-color: #C7C7C7; /* Remove padding and border */ padding: 0; border: none; }
Issue #1: The responsive menu icon not getting CSS style for the first few seconds and appearing below the main menu area. This issue could be related to the loading of your CSS styles. To avoid a flash of unstyled content, you can use the following techniques: Place your CSS link in the <head> section of your HTML document to load it as early as possible. Minimize the use of external stylesheets or fonts that may slow down page rendering. Make sure your CSS selectors are specific enough, and you're not relying on any external CSS that might load later and override your styles. If the problem persists, you can use JavaScript or jQuery to apply styles only when the document is fully loaded. html <script> document.addEventListener('DOMContentLoaded', function() { // Apply your CSS styles here }); </script> Issue #2: The mobile menu icon appearing in the correct place only when not logged in, but going up to the wp-admin top bar when logged in. This issue is likely related to the z-index and positioning of the menu icon. When you're logged in, the WordPress admin bar may have a high z-index, causing the menu icon to appear behind it. Try setting a higher z-index for your mobile menu icon to ensure it appears above the admin bar: css .mobile-menu-toggle { z-index: 10000; /* Adjust this value as needed */ } Issue #3: The menu area jumping when the menu icon is clicked. The jumping issue could be caused by the change in display property between none and block. When you change the display property from none to block, it can cause a reflow of the page. To avoid this issue, you can use CSS transitions to smoothly animate the menu's appearance. Here's an example: css .mobile-menu { display: none; opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-toggle.active + .mobile-menu { display: block; opacity: 1; text-align: center; color: #636363; background-color: #C7C7C7; transition: opacity 0.3s ease; } This CSS will fade the menu in and out when it's displayed or hidden, reducing the "jumping" effect. This is my experience which is share with you. You can apply hope you get a solution.
Thanks, just was your answer, due to lack of time, I will check it in a few days... Thanks Thanks, I will check it