Hi there!

Thanks for reaching out.

Please use the following code in your custom CSS:

#sp-header{
  position: relative !important;}

This should fix the position issue of the header and topbar.

Note: Path towards custom CSS: System > Site Templates Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code tab.

Here is the related documentation link on layout management of Helix3 framework: https://www.joomshaper.com/documentation/helix-framework/helix3/layout-manager-settings

Kindly give me your admin access in the hidden content box to check the rest of the issues you have mentioned here.

Best regards,

Thanks so much Rashida,

Still having a lot of trouble with this. It seems impossible to line search box up in top2 position with buttons in top3 position as you can see in the link. I just wish I could build the whole top banner area as one piece, menu/buttons/search in SP pagebuilder like in Elementor. It seems the template banner menu area plays differently to the module positions in terms of styling and spacing and its impossible to get it all nice and aligned. When I put the menu into a position in the helix framework it doesn't style and when I put buttons below they don't line up.

Is there any way to have it all in the one system? I've put details in hidden below

Hi,

Sorry for your trouble.

Please use the following code in your custom CSS:

#sp-top-bar>.container>.row {
    align-items: center;
}

This should fix the alignment issue of your topbar.

Moreover, you can create the whole section in SPPB editor as a SPPB module, then publish that module in your top position. Right now you are using 3 column for your topbar, but later you need to single column that covers the full space to hold your SPPB module where you would create the whole section. If this is what you wanted.

Thanks!

Thanks Rashida, That's worked well :) I'll have to play with the whole module you suggest above. Problem is when I add menu as a module it does not get the template's menu styling.

A few other spacing issues I am just experiencing...

1. There's a gap between menu and buttons that also includes a big gap between menu and start of dropdown menu lists. How do I close that gap?
2. Can I increase the left margin to about 40px of the whole site? All the content feels way too tightly left.
3. And how do I style the buttons? Is that possible in SP or the theme, or is it a Joomla issue?
4. Search doesn't work at all and returns no results. Is it right to use the Joomla module as I have, or is there a SP builder widget that can do search? I can't find one.

Many thanks!

Hi Rashida, Just wondering if you got my reply above and had any suggestions or customisations? Really appreciate your help. Thanks!

Hi Leo,

Sorry for the unwanted delay. I'm trying to answer your points:

1. The header height is set as 90px, hence the dropdown is starting after that height. If you wish you can lower the header height, then it will reduce the gap: https://cleanshot.com/share/DK9mBDXj

Moreover, I have added the following code in your custom CSS:

#sp-header, #sp-header .logo, #sp-logo img.sp-default-logo{
            height: 70px !important;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span{
            line-height: 70px;
        }
#sp-top-bar .sp-module {
    display: block;
}

I have removed that bottom padding too: https://cleanshot.com/share/b8C6lBNq

2. I have added the following CSS:

   #sp-component {
    padding-left: 40px;
   }

3. Which buttons please?