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,

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. # 1
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. # 2
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. # 3
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. # 4
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. # 5
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. # 6
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. # 7
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. # 8
  • 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