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
- MySigma
- Commercial Templates
- Tuesday, 09 November 2021
- Subscribe via email
Hi Ciaran,
yesssssss... perfect! I removed all of my custom CSS and added your suggested.
Thank you very much!!
Manfred
yesssssss... perfect! I removed all of my custom CSS and added your suggested.
Thank you very much!!
Manfred
- more than a month ago
- Commercial Templates
- # 1
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
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
- more than a month ago
- Commercial Templates
- # 2
Hi Ciaran,
no, still reducing the size when scrolling down the page. Here is the current content of the custom.css:
Best Regards,
Manfred
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-renderingptimizeLegibility}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;cursorointer;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)}:laceholder{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
- more than a month ago
- Commercial Templates
- # 3
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)....
Ciaran
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
- more than a month ago
- Commercial Templates
- # 4
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:
When scrolling down the page:
My customer wants me to disable this effect.
Thank you,
Manfred
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:
When scrolling down the page:
My customer wants me to disable this effect.
Thank you,
Manfred
- more than a month ago
- Commercial Templates
- # 5
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...
2. The menu size should reduce when scrolling down the website
Are you referring to text size?
Ciaran
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
- more than a month ago
- Commercial Templates
- # 6
Hi Ciaran,
the complete header is still reducing the size when scrolling down the page.
Kind regards,
Manfred
the complete header is still reducing the size when scrolling down the page.
Kind regards,
Manfred
- more than a month ago
- Commercial Templates
- # 8
Hi Manfred
To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....
Ciaran
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
- more than a month ago
- Commercial Templates
- # 9
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
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
- more than a month ago
- Commercial Templates
- # 10
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?
Ciaran
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
- more than a month ago
- Commercial Templates
- # 11
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
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
- more than a month ago
- Commercial Templates
- # 13
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
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
- more than a month ago
- Commercial Templates
- # 14
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
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
- more than a month ago
- Commercial Templates
- # 15
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
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
- more than a month ago
- Commercial Templates
- # 16
HI Manfred
I have added a transition which should hopefully smooth out the jitter for you.
Ciaran
I have added a transition which should hopefully smooth out the jitter for you.
Ciaran
- more than a month ago
- Commercial Templates
- # 17
Hi Ciaran,
sorry to say, the effect is still there in Chrome. It works fine in Edge and Firefox.
Regards,
Manfred
sorry to say, the effect is still there in Chrome. It works fine in Edge and Firefox.
Regards,
Manfred
- more than a month ago
- Commercial Templates
- # 18
Hi Ciaran,
Do have a solution for this issue? Super User rights are already granted
Best regards,
Manfred
Do have a solution for this issue? Super User rights are already granted
Best regards,
Manfred
- more than a month ago
- Commercial Templates
- # 20
- Page :
- 1
- 2
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »