1. MySigma
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 09 November 2021
  5.  Subscribe via email
Hi Ciaran!

I'm still working on a website based on the Layla template. My customer now asks me to change the setting of the menu and the showcase image. The menu and showcase settings of the Ensley-Template would be the best.

=> The showcase picture (in Ensley it's "header-slide1.jpg";) up to the top of the website (the menu is slightly transparent)
=> The menu size should reduce when scrolling down the website

Is this possible?

Best regards,
Manfred
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

yesssssss... perfect! I removed all of my custom CSS and added your suggested.

Thank you very much!!

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

If you temp replace all of your custom CSS wit the suggested resolve the issue? You may have something in your custom CSS that is affecting it.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

no, still reducing the size when scrolling down the page. Here is the current content of the custom.css:


:root{--white:#fff;--grey:#e6e6e6;--black:#262626;--green:#06847d;--blue:#4a69bd;--orange:#a46313;--red:#e02e06;--primary:var(--blue);--secondary:var(--green);--background:#fff;--background-alt:#f8fafc;--selection:#9e9e9e;--text-main:#4a4a4a;--text-bright:#000;--text-muted:#707070;--links:var(--primary);--focus:rgba(74,105,189,0.35);--border:rgba(0,0,0,0.2);--border-radius:4px;--code:#000;--animation-duration:.1s;--button-hover:#ddd;--button-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0;--select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-6 0L60 53 7 2a4 4 0 00-5 5l54 54 2 1c1 1 2 0 3-1l54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E");--heading-margin:.5rem 0 .75rem;--typo-size-1:2.8rem;--typo-size-2:2.2rem;--typo-size-3:1.8rem;--typo-size-4:1.4rem;--typo-size-5:1.2rem;--typo-size-6:1rem;--accent-border:0;--accent-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}*,:after,:before{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Avenir,Avenir Next,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;line-height:1.6;font-weight:400;color:var(--text-main);background:var(--background-body);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility}body{margin:0;font-size:1em}code,samp,time{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:var(--variable);font-style:normal;font-family:monospace}kbd{background:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-main);padding:2px 4px}.btn,button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,transform var(--animation-duration) ease}.btn,button,input[type=button],input[type=checkbox],input[type=radio],input[type=range],input[type=submit],select{line-height:1em;cursor:pointer;white-space:nowrap}input:not([type=checkbox]):not([type=radio]),select{display:block}.btn,.tag,button,details>summary,input,select,textarea{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;position:relative;margin:.5rem .5rem .5rem 0;padding:10px 12px;width:10%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--border-radius);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}select{background:var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;padding-right:35px}select::-ms-expand{display:none}select[multiple]{padding-right:10px;background-image:none;overflow-y:auto}.btn,button,input[type=button],input[type=reset],input[type=submit]{padding-right:28px;padding-left:28px;width:auto;background-color:var(--btn-bg,var(--primary));color:var(--btn-c,var(--white));box-shadow:var(--button-shadow)}.btn:hover,button:hover,input[type=button]:hover,input[type=submit]:hover{box-shadow:inset 0 0 2rem rgba(0,0,0,.25)}input:not([readonly]):hover,select:not([readonly]):hover,textarea:not([readonly]):hover{border-color:hsla(0,0%,39.2%,.75)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=range]:active,input[type=submit]:active{background-image:linear-gradient(hsla(0,0%,100%,.1),hsla(0,0%,100%,.1))}button:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}input[type=checkbox],input[type=radio]{position:relative;width:20px;min-width:auto;height:20px;display:inline-block;vertical-align:middle;padding:1px;margin:0 2px 0 0}input[type=radio]{border-radius:50%;box-shadow:inset 0 0 2px rgba(0,0,0,.4),inset 0 0 0 4px #fff}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--primary)}input[type=checkbox]:checked:before{display:flex;justify-content:center;content:"✔";color:#fff;font-size:.8rem}input[type=range]{padding:0}input[type=color]{padding:2px;width:5rem;height:2.5rem}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}::-moz-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}legend{font-size:.9em;font-weight:600}fieldset{border:1px solid var(--border);border-radius:var(--border-radius);margin:0;-webkit-margin-after:.5rem;margin-block-end:.5rem;padding:.75rem 1.5rem}fieldset>legend:first-of-type{padding:0 .5rem;font-size:1.1rem;font-weight:400}.tag{align-items:center;font-size:.8rem;color:var(--tag-c,var(--white));background-color:var(--tag-bg,var(--primary));width:auto;height:2em;justify-content:center;padding:0 .75em 2px;border:0;box-shadow:none}.group,.tag{display:inline-flex}.group{justify-self:flex-start;margin:.5rem 1rem .5rem 0}.group>*{margin:0}.group:not(.vertical)>*+*{-webkit-margin-start:-1px;margin-inline-start:-1px}.group:not(.vertical)>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.group:not(.vertical)>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.group.vertical{flex-direction:column}.group.vertical>*+*{-webkit-margin-before:-1px;margin-block-start:-1px}.group.vertical>:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.group.vertical>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.grid{display:grid;grid-template-columns:repeat(var(--col,1),1fr);grid-gap:var(--gap,1rem)}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}footer{font-size:.8em;color:var(--text-muted)}svg{display:inline-block;font-size:inherit;height:1.2em;vertical-align:-.2em;overflow:visible}figure{display:inline-flex;flex-direction:column;margin:0}figure figcaption{padding:.75rem 1.5rem;margin:0}table{border-collapse:collapse;margin-bottom:10px;width:100%}caption{padding:.5rem 0;caption-side:top}caption,td,th{text-align:start}td,th{padding:.5rem}th{background:hsla(0,0%,39.2%,.025)}thead{border-bottom:1px solid hsla(0,0%,39.2%,.2)}tfoot,tr+tr{border-top:1px solid hsla(0,0%,39.2%,.2)}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.3em;margin:var(--heading-margin);color:var(--text-c,inherit)}h1{font-size:var(--typo-size-1)}h2{font-size:var(--typo-size-2)}h3{font-size:var(--typo-size-3)}h4{font-size:var(--typo-size-4)}h5{font-size:var(--typo-size-5)}h6{font-size:var(--typo-size-6);line-height:1.6em}p,table{margin:0 0 1rem}a{color:var(--links);text-decoration:none}b,strong,th{font-weight:700}blockquote{border-left:4px solid var(--primary);background-color:#fff;margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic}blockquote>footer{font-style:normal;border:0}blockquote cite{font-style:normal}ol,ul{padding:0;-webkit-padding-start:2rem;padding-inline-start:2rem}ul{list-style:disc}dt{font-weight:700}dd{margin:0 1rem}address{font-style:normal}mark{background-color:var(--highlight);border-radius:2px;padding:0 2px}.primary{--text-c:var(--primary);--btn-bg:var(--primary);--tag-bg:var(--primary);--accent-bg:var(--primary)}.secondary{--text-c:var(--secondary);--btn-bg:var(--secondary);--tag-bg:var(--secondary);--accent-bg:var(--secondary)}.green{--text-c:var(--green);--btn-bg:var(--green);--tag-bg:var(--green);--accent-bg:var(--green)}.blue{--text-c:var(--blue);--btn-bg:var(--blue);--tag-bg:var(--blue);--accent-bg:var(--blue)}.orange{--text-c:var(--orange);--btn-bg:var(--orange);--tag-bg:var(--orange);--accent-bg:var(--orange)}.red{--text-c:var(--red);--btn-bg:var(--red);--tag-bg:var(--red);--accent-bg:var(--red)}.white{--text-c:var(--white);--btn-bg:var(--white);--tag-bg:var(--white);--accent-bg:var(--white)}.grey,.white{--btn-c:var(--text-main);--tag-c:var(--text-main)}.grey{--text-c:var(--grey);--btn-bg:var(--grey);--tag-bg:var(--grey);--accent-bg:var(--grey)}.black{--text-c:var(--black);--btn-bg:var(--black);--tag-bg:var(--black);--accent-bg:var(--black)}.accent{color:var(--accent-c,var(--text-main));background-color:var(--accent-bg,var(--white));border:var(--accent-border,0);border-radius:var(--border-radius,0);box-shadow:var(--accent-shadow,none);overflow:hidden}.accent.black,.accent.blue,.accent.green,.accent.orange,.accent.primary,.accent.red,.accent.secondary{--accent-c:var(--white);--text-c:var(--white)}@media only screen and (min-width:440px){.grid[style*="--col-xs:"]{grid-template-columns:repeat(var(--col-xs,1),1fr)}.grid>[style*="--sc-xs:"]{grid-column:span var(--sc-xs,1)}.grid>[style*="--sr-xs:"]{grid-row:span var(--sr-xs,1)}}@media only screen and (min-width:640px){.grid[style*="--col-sm:"]{grid-template-columns:repeat(var(--col-sm,1),1fr)}.grid>[style*="--sc-sm:"]{grid-column:span var(--sc-sm,1)}.grid>[style*="--sr-sm:"]{grid-row:span var(--sr-sm,1)}}@media only screen and (min-width:960px){.grid[style*="--col-md:"]{grid-template-columns:repeat(var(--col-md,1),1fr)}.grid>[style*="--sc-md:"]{grid-column:span var(--sc-md,1)}.grid>[style*="--sr-md:"]{grid-row:span var(--sr-md,1)}}@media only screen and (min-width:1280px){.grid[style*="--col-lg:"]{grid-template-columns:repeat(var(--col-lg,1),1fr)}.grid>[style*="--sc-lg:"]{grid-column:span var(--sc-lg,1)}.grid>[style*="--sr-lg:"]{grid-row:span var(--sr-lg,1)}}
/*# sourceMappingURL=bonsai-base.min.css.map */


.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 {
height: auto;
max-height: none;
}

.scrolled .logo {
padding-block: 20px;
}


.layerslideshow95 .layerslideshow-caption {
text-align: justify;
}

.cwhire_modern .cwhire_header {
font-size: 14px;
}


/* 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 */
}



Best Regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

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

.scrolled .logo-image {
height: auto;
max-height: none;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I think we are talking from different things ;-)
The goal is to deactivate the resizing of the header height and the downsizing of the logo when scrolling down the website.

Before scrolling down the page:
https://www.mysigma.xyz/epluss/Header.png


When scrolling down the page:
https://www.mysigma.xyz/epluss/Header_scrolled.png

My customer wants me to disable this effect.

Thank you,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

1. The showcase picture (in Ensley it's "header-slide1.jpg";) up to the top of the website (the menu is slightly transparent)

Try enabling the overlap header option in your slideshow module settings and also add the following to the Custom CSS field of your template style settings...

#container_header {
background-color: transparent;
}


2. The menu size should reduce when scrolling down the website

Are you referring to text size?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

a friendly reminder ;)

Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

the complete header is still reducing the size when scrolling down the page.

Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

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

Regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

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

Best regars,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 14
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 15
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 16
Accepted Answer Pending Moderation
0
Votes
Undo
HI Manfred

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 17
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

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

Regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 18
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Manfred

This issue should be now resolved.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 19
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

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

Best regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 20
  • Page :
  • 1
  • 2


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok