Creating A Custom Header Layout - Question | JoomShaper
Back to the questions

Creating A Custom Header Layout

JK

Jeffrey Kiefer

SP Page Builder 1 year ago

I am having 2 issues with creating a custom header layout. I followed the documentation but I seem to be not doing it correctly. I acheived the results needed but not correctly.

I am trying create centered custom header layout with the header and main navigation (menu) under it. The results can be found here https://iooflodgedirectory.org

The documentation is for a header with the logo and menu in the same row. I want it centered with the logo above the menu. https://www.joomshaper.com/blog/how-to-create-a-custom-header-using-helix-ultimate

What I did. In the Layout options I added a new row called "Header" and added the module position "menu" to it. I moved it to the top. This added the main navigation (Mega Menu).

I added another row called "Top" and moved it above the "Header" row. When I added the built in "logo" position it added the logo to the left instead of center. To correct this I added a custom module with the logo in a addon image and published it to the top. This works but seems like a sloppy work around and using the built in "logo module" would be better.

The other problem I am having is the main navigation (Mega Menu) "flashes" when clicking on a menu link

Problem 1 The logo is using a module position containg an image not the built in logo position. I would like to use the built in logo position but the logo displayes to the left instead of center. How do I get the logo to center?

Problem 2 How to stop the main menu (mega menu) from flashing when links are clicked.

I seem to be making this harder than it need be. The site is live and the visual display is as intended but I would like to understand how to do this correctly. I am sorry for such a long post but I find this difficult to explain.

Your help and guidance in this issue is greatly appriciated.

0
6 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 year ago #170021

Hello Jeffrey Kiefer,

Thank you for reaching out. To resolve this issue effectively, I would need access to your Joomla administrator area to investigate the problem further.

Before you provide access, I kindly ask that you take a full backup of your website. This will ensure that all your data is safe during troubleshooting.

Once the backup is completed, please share the administrator credentials with me so I can proceed with the investigation.

Best regards

0
Pavel
Pavel
Accepted Answer
1 year ago #170031

When I added the built in "logo" position it added the logo to the left instead of center.

Hi.

You can put the logo in the center only through CSS. There is no settings for this. Place built in logo instead of module, after that I can help you with CSS. (Admin access no need)

Problem 2 How to stop the main menu (mega menu) from flashing when links are clicked.

The reason is Header fade in animation.

Set Header offset to 1 And CSS

#sp-header {
    animation: none !important;
}
#sp-header.header-sticky + section {
    padding-top: 60px;  /*Optionaly: Prevents page's jump when Header sticks*/
}

Tip. Use custom.css file instead of template's Custom CSS field. Read Helix documentation about this subject

0
JK
Jeffrey Kiefer
Accepted Answer
1 year ago #170790

Thank you Pavel. I will impliment the suggestions. I will work on the logo issue on my development site and then give the url so you can create a custom CSS for center logo.

0
JK
Jeffrey Kiefer
Accepted Answer
1 year ago #170792

"Use custom.css file instead of template's Custom CSS field. Read Helix documentation about this subject" I was unable to find that information in the Helix docs. Could ypu provide me with the location of this information? https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

0
Pavel
Pavel
Accepted Answer
1 year ago #170842

Hi.

This is in Helix 3 docs. In Helix Ultimate, this is done in the same way.

There is no guide in Helix Ultimate about where to create this file. I think the Joomshaper team should give the documentation for Helix Ultimate so that users can find this important information.

This is all that is in Helix Ultimate doc, without detailed explanations.

Also, after updating Helix Ultimate documentation, important information about the ..../css/custom folder and Custom SCSS were lost

0
JK
Jeffrey Kiefer
Accepted Answer
1 year ago #171852

Thank you Pavel. That corrected the issue and was easier than expected. I will post the other issue, (centering the logo) soon. Please keep this thread open.

0