fixed navigation rt-clarity 1.5.0
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
Hello all,
I can't get the fixed navigation to work... I want to set this on this website (URL in Secure - test site) , only on the start page.
Base Outline - Page Settings - Fixed Header set, but it just doesn't work.
Also I want the colour of the background to change when I get to the next section....
I've been working on this since yesterday and haven't found a solution.
Help???
Thanks a lot
Traudel
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22072
- Thanks: 3192
- messin' with stuff
- Post your Atom settings... make sure they're targetting #g-navigation
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
Hi Matt,
fixed-header simply does not work.
(see screenshots).
What works is if I set in the scss:
#g-navigation.menu-absolute { background: rgba(255, 255, 255, 0.9); position: fixed; }
But then I would need a fix point where I can change the background-color to #g-navigation.
At the moment I'm not getting anywhere...
Regards,
Traudel
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22072
- Thanks: 3192
- messin' with stuff
- I don't see the Javascript for the Fixed Header atom loading at all... Your homepage is loading Outline ID #14 -- is the Atom configured on that particular outline?
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
Hello,
I have to ask again.
Fixed Header works perfectly. (rt-clarity)
But I have no idea how to set it so that when the #g-navigation section scrolls down, it gets smaller.
So not the full size of the navigation section.
via scss?
Many thanks
Regards
Traudel - Last Edit: 9 months 6 days ago by Felix .
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22072
- Thanks: 3192
- messin' with stuff
- It is working though, it's scrolling as expected? There is an autohide feature that will hide it when scrolling down, show it when scrolling up. There is no option in the Atom to change the height of the targetted section while it's scrolling, that would require custom dev.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
Hi Matt,
yes, this is the autohide. I have set that to Disabled.
The customer wants the fixed header to shrink downwards, i.e. reduce in size.
Is there possibly a scss code for this?
I have set the link to Secure from my test page...
Regards
Traudel
-
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
... one more info
it might have to be set with this code (???):
#g-navigation.headroom--not-top {
position: fixed;
width: 100%;
top: 0;
z-index: 1001;
left: 0;
}
But I can't get the height right, it changes when I change the width.
Regards
Traudel
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22072
- Thanks: 3192
- messin' with stuff
-
Unfortunately there is no setting in the Atom design that will do what you're after and custom development is beyond the scope of moderator support on these boards.
Headroom.js is documented here. There are various classes it sets for different events that you can target and style as you see fit: wicky.nillia.ms/headroom.js/ - Last Edit: 9 months 5 days ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Felix
- Rocketeer
- Posts: 92
- Thanks: 0
-
Thank you...
I have tested various settings, unfortunately without success.
Is there really no setting possible? The fixed header is included in the rt-clarity template.
class="menu-absolute headroom-bg-section headroom--not-bottom headroom--pinned-up headroom--top"
Then it should also be possible to make adjustments using scss.
For example, I can change the width perfectly with this scss entry, e.g. with 80%:
#g-navigation.headroom--not-top {
position: fixed;
width: 100%;
top: 0;
z-index: 1001;
left: 0;
}
But I have no idea about the height? (transition??)
Regards
Traudel
-
Time to create page: 0.059 seconds