Customized Header In HelixUltimate Similar To Luxyort Template And With Logo Resizing
David
I am starting to design a website using Helix Ultimate (v2.1.1) as a template and I want to customize the header.
I have already read the documentation and in principle I have clear steps to distribute the elements according to my needs, but in terms of appearance I would like it to be as in the Luxyort template, which initially the header has transparency and then scrolling down activates the sticky header changing to a darker background.
In addition to this, I would like the sticky header logo size to be 50% smaller.
From what I have been researching, to achieve this should I use custom CSS code?
If so, could you show me an example of how to do it? Ideally I would like to see an example of Luxyort's own styling.
Thank you very much.
Rashida Rahman
Accepted AnswerHello,
Here is your sample code for the Header background color, you may try in your custom CSS:
#sp-header {
background: transparent !important;
}
#sp-header.header-sticky {
background: rgb(25 26 27 / 50%) !important;
}For logo height:
#sp-header .logo-image {
height: 36px;
}
#sp-header.header-sticky .logo-image {
height: 15px;
}Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
However, in luxyort template header height reduced, not the logo height, if you really mean so.
Best Regards
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out to us.
Yes, it requires custom CSS. Kindly give me your site URL here, so that I can give you suggestion specifically.
Best Regards
David
Accepted AnswerHello Rashida,
Thank you for your reply.
Unfortunately I am still in development phase (local environment) and the web is not published.
Do you have any sample CSS code that I can test?
David
Accepted AnswerThank you for the answer,
Would it be possible to change the logo when it changes from header to sticky-header?
Rashida Rahman
Accepted AnswerHi,
You're welcome:)
Please follow the accepted answer from the post below:
https://www.joomshaper.com/forum/question/4043
Best Regards