Fixed menu in website template doesn't remain fixed in mobile

Website Templates
1

I have noticed that in template Waterboat has fixed menu. But this fixed menu doesn’t remain fixed in any mobile. Is there a way to make it fixed in mobile too ?

2

Hey there.

Thanks for contacting us :slight_smile:

Let me see it, please provide URL of the page and I will check it.

Regards.

3

Certainly! Making a menu fixed on mobile devices involves using CSS to set the menu position to fixed, even when scrolling. Here’s an example of how I achieve this on my website, which is related to auto loans, car loans, auto refinance, and car refinance:

Let’s assume your website has a navigation menu with the class name “main-menu”. You can use media queries in your CSS to apply specific styles for mobile devices and make the menu fixed. Here’s an example:

/* Styles for larger screens (desktops, tablets) */
.main-menu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff; /* Set your desired background color */
  z-index: 1000; /* Set a high z-index to ensure the menu appears above other elements */
}

/* Styles for smaller screens (mobile) */
@media only screen and (max-width: 767px) {
  .main-menu {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff; /* Set your desired background color */
    z-index: 1000; /* Set a high z-index to ensure the menu appears above other elements */
  }
}

In this example, the position: fixed; property is applied to the “.main-menu” class for both larger screens and smaller screens (max-width: 767px) to make the menu fixed at the top. You can customize the styles, such as the background color, to match your website’s design.

Make sure to include this CSS in the stylesheet of your website. Additionally, you may need to adjust the media query breakpoint (767px in this example) based on your design and testing on various devices.

4

Hi there

Dear @Rolandmarks Thank you for dedicating your time and effort. We appreciate it. However, the code you provided is not functioning, so, maybe it requires some improvements.

Regards.