We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Need help with styling the Macro template

Featured Lock Resolved Issue
I used the Macro template to build a wedding website here: https://gloriaeddy.com/
Somehow, the topbar on the home stopped being transparent when the page is loaded. Also, I the logo on home page is styled differently from the logo on the the other pages. I want to apply the style of the logo on the home page to all the page.
I figure out that the home is using a different style than the other pages, but I can't figure out how to fox those two issues.

Can you please help me.
to summarize:
1- I want the top bar to be transparent when the page is loaded, just like it does in the Macro template.
2- I want to have the Logo on all the pages styled just as the logo on the home page.


3 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for contacting us. Please add this css code inside the custom.css file and share a screenshot that you want to do number two.

#sp-header {
width: 100% !important;
height: 75px;
z-index: 999;
background-color: rgba(0, 0, 0, 0);
position: fixed;



More than a month ago #Permalink
Thanks a lot for your help. the fix you recommended worked.

For the second issue, I am using just 3 words for my logo G&E. the styling on the home page is exactly what I want, but the logo style on the other pages is not following the font style that I want. Please see the screenshot in the attached file.

Thank you in advance for your help.


Attachments (1)

  • Capture.zip 195 KB

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Add this CSS code inside the custom.css file.

.has-slideshow #sp-header .sp-megamenu-parent >li, .has-sub-image #sp-header .sp-megamenu-parent >li {
line-height: 75px;
height: 75px;
.has-slideshow #sp-header .logo, .has-sub-image #sp-header .logo {
height: 75px;
.has-slideshow #sp-header, .has-sub-image #sp-header {
position: absolute;
background-color: transparent;
height: 75px;


There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us