Color not showing in top menu and button

spinsker

The color for my top menu is not showing on the front end, although it does display in the template style manager in the back end. In both locations, the blue color for the text and frame of the donate button has grayed out.
I'd like to know how to have the top menu items display in main mobile menu when viewed on mobile. Right now, they are not accessible on mobile.

website is at https://shaindyp8.sg-host.com/
logging in at https://shaindyp8.sg-host.com/administrator

spinsker

?????

spinsker

So I fixed the problem with an override. The button issue was that I used the wrong style (light vs primary)
Still not sure why an override is necessary for what should be normal behavior.

saguaros

Hi spinsker,

Good news - both your fixes were the right call, not a mistake on your end! Here's why:

Top menu color: JA Athena's own template.css sets the topbar background to #F8FAFC (near white) by default:

.t4-topbar { background: #F8FAFC; }

The "Blue" option in Template Style Manager adds a class to the topbar, but no CSS rule in the template actually uses that class - so it was never going to work. Your override was the only fix.

Mobile: confirmed too - the template deliberately hides that section under 992px width. Not a bug, just a desktop-only design choice, but it does mean the links vanish with no fallback.

@media (max-width: 991.98px) {
  .t4-topbar .topbar-l { display: none; }
}

If you'd like them back on mobile, add this to the same custom.css:

@media (max-width: 991.98px) {
  .t4-topbar .topbar-l {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .t4-topbar .navbar .navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}

Please check it on a real phone after - might need a little spacing/font-size tweaking depending on how many links you have.