Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Build.r Colorshift2 sticky nav background color

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi,

I have been looking through the forum and did not see the answer to this. I would like #navwrap to be #330033 and change to #000000 when the sticky nav takes over as I scroll down. I have tried all sorts of css combinations to achieve this but can't seem to get it right.

pinatel721.com/performance/index.php

Can you point me in the right direction?

Thanks,

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Joanne,

Have you tried adjusting the sticky menu colours in the template settings?

Design tab on left > General settings > Style tab and scroll down for sticky menu settings
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
sticky-settings.jpg


Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hey Paul,

Happy New Year from MA!

Yes, I've tried setting the background color there but as you can see from the attachments, the black doesn't apply to the #navwrap. I would like the whole purple bar to be black. Only the .zen-container shows black. I don't know what css to use to make the navwrap remain purple until you scroll down and the sticky nav is triggered. At which time, the navwrap turns black.

J

navwrap.jpg


sticky-nav.jpg
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
ok

Try

.zen-nav-fixed .zen-spotlight {background-color: #330033 !important;}

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
On my computer (hosted Siteground -- cleared cache) it makes the navwrap #330033 all the time whether sticky or not.

I was looking for almost the opposite.

Is there a way to make the #330033 turn to #000000 when the sticky nav is triggered? As we scroll down? I'm sure I saw that on another template -- but maybe I'm crazy. Could be.

J
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
I've been looking through the templates and two do what I'm looking for: Venture and Hub2. I found this css in Hub2.

.affix {
top: 0;
width: 100%;
z-index: 1000;
left: 0;
padding: 0px;
position: fixed;
background: #121212;
}

Do I need to put a class called affix on my menu?

J
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
#navwrap.zen-nav-fixed {background: #000 !important;}

Try this instead

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks! That worked!

J
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Nice one :)
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
And of course Happy New year to you and your family :)

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers