Customized header in HelixUltimate similar to Luxyort template and with logo resizing - Forum | JoomShaper
Solved Helix Framework

Customized header in HelixUltimate similar to Luxyort template and with logo resizing

Asked by David Forés 1 year ago Last activity 1 year ago

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.

Accepted answer

Marked as the solution
Rashida Rahman Staff
1 year ago

Hello,

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

7 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
1 year ago

Hi 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 Forés Asked this
1 year ago

Hello 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 Forés Asked this
1 year ago

Thank you for the answer,

Would it be possible to change the logo when it changes from header to sticky-header?

Rashida Rahman Staff
1 year ago

Hi David,

Did that help?

David Forés Asked this
1 year ago

Yes, thank you so much.

Rashida Rahman Staff
1 year ago

Thanks for confirming and you are always welcome:)

Have a nice day!

Log in to reply.