Menu vanish after 2 seconds

Hello

First of all thanks for the amazing theme and support. I am always around looking for answers for my problems with great success. This time this particular issue is making me really mad.

So, my website is: http://www.ecolodgelile.com

The problem is that the menu dissapear after 2 seconds on mobile devices.

I tried some CSS codes from other threads with no success.

Thanks for you time and help.

Hello there,

Sorry for inconvenience, but that isn’t default behavior of Sydney theme. Did you add custom CSS code or edit the main theme’s CSS? If so, please temporarily revert it. Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your support.

This is the CSS that I added. I put all this just to try to make the main menu transparent (appearing at the photo slider) and to centralize the logo and menu.

In fact I would like to have the menu first and the site logo on the bottom but I never achieve this task.

.site-header{
background-color: transparent !important;
height: 0 !important;
padding: 0 !important;
}

.site-logo
{
margin-top: 10px;
}

nav#mainnav {
margin-top: 10px;
}

@media only screen and (max-width: 767px) {
.site-header .site-logo {
display: none;
}

.site-header .btn-menu {
    margin: 0px auto;
}

}

.menu-fallback{
display: none;
}

There is anything wrong at this code. Thanks again Kharis, you are the best.

Hello there,

So you would like to achieve something like this: https://cloudup.com/cQV-Rmc1dGk? Please advise.

Regards,
Kharis

Hi Kharis

Yes, this is exactly what I want. Thanks for the support.

You are amazing.

Thanks

Hello there,

I guess you would like to do it on homepage only. If so, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:1025px){

   .home .site-header{
      position: fixed !important;
   }

   .home .site-header .row{
      position: relative;
   }

   .home .site-header .col-md-4{
      position: absolute;
      top: 40px;
   }
   
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis, once more thanks for your support.

I did two experiences: First I changed all my CSS code for your code. It didnt work as I expected.

Than I put the code that I had before, together with your code, and it didnt work as well.

Any other suggest?

Thanks

Hello there,

Where did you insert the code? Be sure that the group of CSS code where the new code addition be part of is error free. You can check it using this tool. What will happen if you clear your web browser’s cache and try again?

Regards,
Kharis

Hi Kharis

I did everything you told me.

I insert the code in appearance, custom CCS. I checked the code and its error free. Thanks for providing the tool.

I cleared the cache and this did the trick for computer versions. But in mobile the menu keep dissapering after the site load.

This is the code I have now:

.site-header{
background-color: transparent !important;
height: 0 !important;
padding: 0 !important;
}

.site-logo
{
margin-top: 10px;
}

nav#mainnav {
margin-top: 10px;
}

.site-header .btn-menu {
margin: 0px auto;
}

I appreciate your help, thanks for that. Maybe i am wrong but looks like the header slider (site origin) is covering the logo and the menu.

Its only possible to see the menu, when the slider change image. This only start to happened some days ago. It worked fine for months.

Thanks to following my case.