Creating a fixed header&navigation in Callisto (NEW AND UPDATED)
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
In a custom scss file. Make sure your menu item is the same as the other poster's was.
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Zesharck
- Sr. Rocketeer
- Posts: 146
- Thanks: 0
-
Hi Mark,
I have missed something because it does not work.. I have this on my custom.scss file:
body.itemid-355 #g-main {
margin-top: 140px;
}
body.itemid-512 #g-main {
margin-top: 140px;
}
body.itemid-513 #g-main {
margin-top: 140px;
}
body.itemid-523 #g-main {
margin-top: 140px;
}
the Id are the ones from my Calisto menu links.. but I still have the pb with jomsocial and kunena...
thx for your help
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
In the case of item 523 - it should be "g-mainbar" instead of "g-main" - I'm sure it's the same on the other items that are not working too.
Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.
Regards, Mark. -
The following users have thanked you: Zesharck
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- WebMax
- Rocketeer
- Posts: 98
- Thanks: 0
-
Jeff Boulton wrote:
Thanks for this css. I was thinking of having the g-header scroll up with the g-navigation sticking to the top. Do you have any suggestions on how to do this? Thanks. JeffJust want to know if there is aleady a css solution for this. Am trying to achieve same effect as in Rocket Theme Forum. If it requires customization, can you please point me to right direction? Thanks.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
WebMax - my reply is the same...
MrT wrote:That would require JavaScript - I think you mean like the RT forum right? Sorry, that a bit too much for this tutorial. That's getting into customisation.
So there won't be a CSS solution for that. It will require Javascript and there's no simple way to point you in the right direction for that.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
ALL - my tutorial here now has revised code to deal with the offcanvas menu properly and also to make it easier to deal with other pages (so you don't have to add extra code).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
canonikus - yes, you would have to use media queries to achieve that.
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
// Gantry 5 custom CSS file // import breakpoints @import "nucleus/mixins/breakpoints"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { }
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Alper Uzmezler
- Rocketeer
- Posts: 87
- Thanks: 1
-
Making the header and making the nav sticky.
Showing both during scroll up.
List files needed to make the top header floating
File Paths assigned in settings
I loaded them in settings than in layout loaded them from left to right one by one. This might not have been necessary.
- templates/rt_callisto/custom/jqueryheadroom/jqueryheadroom.js
- templates/rt_callisto/custom/headroom/headroom.js
- templates/rt_callisto/custom/initheadroom/initheadroom.js
- templates/rt_callisto/custom/initheadroom/animate.css
- templates/rt_callisto/custom/scss/custom.scss
Custom CSS for making the header floating and navigation sticky.
custom css..headroom--not-top.slideDown ~ section#g-navigation { left: 0px; right: 0px; top: 99px; z-index: 100; } .headroom.slideUp ~ section#g-navigation { left: 0px; position: fixed; right: 0px; top: 0px; z-index: 100; } .headroom--not-top.slideDown ~ section#g-navigation { left: 0px; position: fixed; right: 0px; top: 99px; z-index: 100; max-height: 100px; } .headroom--not-top.slideUp { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .headroom--not-top.slideDown { left: 0px; position: fixed; right: 0px; top: 0px; z-index: 100; max-height: 100px; }
This is the initialization js attached last.document.addEventListener("DOMContentLoaded", function(event) { var myElement = document.querySelector(".headroom"); console.log(myElement); // is this null? var headroom = new Headroom(myElement, { "offset": 0, "tolerance": 0, "classes": { "initial": "animated", "pinned": "slideDown", "unpinned": "slideUp" } }); headroom.init(); });
If anyone plays with this and get the header animation to be smooth let me know.
I am not expert in css. Just hacked it through the implementation.
Also made a short video for the demonstration.
Video
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Enjoy.. - Last Edit: 9 years 6 months ago by Alper Uzmezler.
-
The following users have thanked you: Skylance
-
Time to create page: 0.074 seconds