A little push ;-)

Hi Manfred

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this possibility further. For our reference please paste a link to this post in your email.

Ciaran

Hi Ciaran,

Sorry! I've forgot to send you the link to the website. You should receive a email with link and login credentials within the next minutes.

Thank you!
Manfred

Hi Ciaran,

The scrolling of the menu is working quite good. There is only a little problem. When you scroll very slowly down the website, there is point where the menu switches between "normal" and "scrolled" and back to "normal" and back to "scrolled" and so on... like a stroboscope. Is there a possibility to stop this behavior? It looks like that this problem occurs when you are visiting the website the first time after closing the browser. This strobe-effect disappears after completely scrolling down the page.

Here is the current custom.css:

#container_header {

    background: rgba(255,255,255,.75) !important;

}



.hornav a:hover {

    text-decoration: underline !important;

} 



.logo {

    display: flex;

    justify-content: flex-end;

}



@media only screen and (max-width: 767px) {

  .logo {

    justify-content: center;

  }

}



#container_base1_modules, #container_base2_modules {

    color: #555555 !important;

} 



#container_footer {

    display: none;

}



.scrolled #container_header {

    position: sticky;

}



.scrolled .logo-image {

    max-height: 50px;

}



.scrolled .logo {

  padding-block: 5px;

}



.layerslideshow133 .layerslideshow-caption {

    text-align: justify;

}



/* titillium-web-regular - latin-ext_latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/titillium-web-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */

  src: local(''),

       url('../fonts/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/titillium-web-v10-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */

       url('../fonts/titillium-web-v10-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */

}



/* titillium-web-600 - latin-ext_latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 600;

  src: url('../fonts/titillium-web-v10-latin-ext_latin-600.eot'); /* IE9 Compat Modes */

  src: local(''),

       url('../fonts/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/titillium-web-v10-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */

       url('../fonts/titillium-web-v10-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */

}

Hello

Would you have a URL to an example of this issue?

Ciaran

Hi,

I've sent you an email with the URL. Some additional information. The problem occurs with Edge and Chrome. It seems that Firefox isn't affected.

Best regards,
Manfred

Thank you

Could I ask you to set us up with temporary admin access to your as unfortunately this issue can not be resolved with only CSS.

Ciaran

Hi!

I've sent you an email with the login credentials.

Best regards and THANK YOU!
Manfred

Hi Ciaran,

Do have a solution for this issue? Super User rights are already granted

Best regards,
Manfred

Thank you Manfred

This issue should be now resolved.

Ciaran

Hi Ciaran,

sorry to say, the effect is still there in Chrome. It works fine in Edge and Firefox.

Regards,
Manfred

HI Manfred

I have added a transition which should hopefully smooth out the jitter for you.

Ciaran

Hi Ciaran,

my customer changed his mind and don't want the size reducing of the menu when scrolling anymore. Would you be so kind and could you remove this feature? I don't know where you made the changes.

I would send you the login credentials to info@joomla51.com. Would this be okay for you?

Sorry for the circumstances!!! My customer is changing his mind quite often but the website is now live.

Thank you so much,
Manfred

Hi Manfred

You can revert your template to the original by deleting your templates override folder (../templates/[YourTemplate]/html) and then reinstalling the template. This will revert any custom changes to your template excluding any custom CSS added via your template style settings.

Ciaran

Hi Ciaran,

sorry for my very late response!!

I reinstalled the original template and copied the original folder (../templates/[YourTemplate]/html) to my customised template style. Info:
The header is still reduceing the size when scrolling down the page. Would you be so kind and could you help me?

Regards,
Manfred

Hi Manfred

Could I ask you to resend access details for your site. The details we have appear to currently give use a 404 error (http://www.######.com/x_epluss/).

Ciaran

Hi Ciaran,

I sent you an email a few minutes ago ;-)

Best regars,
Manfred

Hi Manfred

I have reverted your template to the default but have not noted any change. Just so I understand you correctly, do you wish to remove the reduction in the logo size on scroll? Does adding the following to the Custom CSS field of your template settings give you the desired result?

.scrolled .logo-image {

    height: 100%;

}

Ciaran

Hi Ciaran,

the header itself should not reduce size (height). It should be fixed like the original Layla template https://www.joomla51.com/demo/#layla

Regards,
Manfred

Hi Manfred

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.scrolled .logo-image {

    height: 100%;

}

.scrolled .logo {

    padding-block: 20px;

}

Ciaran