[Locked] Sticky Header Background Not Appearing On Scroll (Politica Template) - Question | JoomShaper

[Locked] Sticky Header Background Not Appearing On Scroll (Politica Template)

AB

Alberto Bonello

Template 1 week ago

I’m running into an issue with the Politica template and could use some guidance.

When the header becomes sticky on scroll, the background disappears. As a result, the menu text blends into the page content and becomes difficult to read. I’d like the header to maintain a solid background at all times so the navigation stays visible.

0
13 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221603

Hi Alberto,

Unfortunately that template do not add extra class for header if you scroll down (like others), so they only easy way would be by adding transparent background everywhere (custom CSS)

.helix-ultimate #sp-header {background-color: rgba(6,48,104,0.7) !important; }

Done, I also added extra effect if you hover over header to improve visibility of menu items.

All my simple changes are here: /templates/politicas/css/custom.css - so you can edit anytime.

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221613

Thank you. However, I have noticed that the training menu item has been changed to black instead of white, and it is only visible in that specific item.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221614

I changed only header bg color, nothing more.


if you need something else I need link to screenshot or video with details - simple request from my side.

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221615

Here is the issue with the menu. Thanks

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221616

yes, black color - it's that menu item is not a link but "span", and only link (a href) had defined light color.

Please to custom.css file, you know the path already, add that line (at the bottom) + save & close:

.sp-megamenu-parent > li > span  { color: #eee; }

that's all ;) thx

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221629

I tried that, but now the menu buttons are turning red, and no matter what color I change them to, they always turn red. I’ve attached a picture for you to see. Thanks

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221669

I assume you weren't the person who originally developed that site, am I right?


The only red I saw, are the two buttons at the right side. But bg color is taken from addon settings. Just edit module (SPPB) used there, change colors and save settings. Then clear Joomla cache.

Website customization is on your side.

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221670

I am aware of the issue. I have modified the color there, but it reverts to orange. I have attempted to change the color to any other color, and both buttons change to the same color.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221671

I see green, right now. So should be OK.

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221673

Changed one of the buttons to green, both buttons changed to green. I do not know why this is hapening because each od the buttons is in a separate module. Please check the backend.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221678

each od the buttons is in a separate module

Stupid idea! who did that?

My suggestion for you is:

  1. Create a new module (SPPB), in "menu" position.
  2. Use single Group Button addon - that allows you to have two or more Buttons inside.
  3. Set links, names and colors as should be.
  4. Publish module.
  5. Disable old two modules.

yes, recreate! and all will work correctly. I know why you have issue that you have, but fixing it doesn't make sense, just follow 1-5 steps.

0
AB
Alberto Bonello
Accepted Answer
1 week ago #221776

Hello,

I have recreated the button group and appear to be fine. However, I believe the reason they created two separate buttons was to avoid the issue of the button stacking up one on top of the other in the mobile version. Please see the screenshot for reference.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #221778

You can avoide that using margin around buttons (5px). simple.

0
This topic is locked