Creating a fixed header&navigation in Callisto (NEW AND UPDATED)
-
-
- Alper Uzmezler
- Rocketeer
- Posts: 87
- Thanks: 1
-
I posted a solution to this but can't get the scrolls to animate. Let me know if you have time to look at it so that it can scroll with animation.
canonikus you welcome
Updated code with animations
js function
document.addEventListener("DOMContentLoaded", function(event) { var myElement = document.querySelector("#g-header"); //console.log(myElement); // is this null? var headroom = new Headroom(myElement, { "offset": 0, "tolerance": 0, "classes": { // when element is initialised initial : "headroom", // when scrolling up pinned : "headroom--pinned", // when scrolling down unpinned : "headroom--unpinned", // when above offset top : "headroom--top", // when below offset notTop : "headroom--not-top" }, // callback when pinned, `this` is headroom object onPin : function() {}, // callback when unpinned, `this` is headroom object onUnpin : function() {}, // callback when above offset, `this` is headroom object onTop : function() {}, // callback when below offset, `this` is headroom object onNotTop : function() {} }); var myElement2 = document.querySelector("#g-navigation"); //console.log(myElement2); // is this null? var headroom2 = new Headroom(myElement2, { "offset": 0, "tolerance": 0, "classes": { // when element is initialised initial : "headroom2", // when scrolling up pinned : "headroom--pinned2", // when scrolling down unpinned : "headroom--unpinned2", // when above offset top : "headroom--top2", // when below offset notTop : "headroom--not-top2" }, // callback when pinned, `this` is headroom object onPin : function() {}, // callback when unpinned, `this` is headroom object onUnpin : function() {}, // callback when above offset, `this` is headroom object onTop : function() {}, // callback when below offset, `this` is headroom object onNotTop : function() {} }); headroom.init(); headroom2.init(); });
CSS update
.headroom--not-top.headroom--pinned ~ section#g-navigation { left: 0px; position: fixed; right: 0px; top: 0px; z-index: 100; max-height: 100px; margin-top:99px; -webkit-transition: all 0.5s ease-out; } .headroom--not-top.headroom--pinned { left: 0px; position: fixed; right: 0px; top: 0px; z-index: 100; max-height: 100px; transform: translateY(0%); } .headroom--not-top.headroom--unpinned { transform: translateY(-100%); } #g-header { transition: transform .35s ease-out; } - Last Edit: 8 years 9 months ago by Alper Uzmezler.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Use this code...
html:not(.g-offcanvas-open) .g-offcanvas-toggle { position: fixed; } html.g-offcanvas-open .g-offcanvas-toggle { position: fixed; left: 275px; }
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. -
The following users have thanked you: Irresisti
- 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.
-
-
-
- CatherineG
- Jr. Rocketeer
- Posts: 34
- Thanks: 1
-
Thank you for this. I am using it and have found two issues.
1) The spacing of the header itself, I'd like the menu to be at the top of the page, and the module, with my header beneath the menu, all on the same background. In order to do this, I added:
#g-header #g-content {
margin: 0;
padding: 0;
max-height: 200px;
}
header#g-header {
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 100;
}
section#g-navigation {
left: 0px;
position: fixed;
right: 0px;
top: 300px; /* You may have to alter this value */
z-index: 100;
}
#g-page-surround > section#g-navigation + * {
padding-top: 140px; /* You may have to alter this value */
}
.g-offcanvas-toggle {
z-index: 110;
}
html.g-offcanvas-open header#g-header, html.g-offcanvas-open section#g-navigation {
left: 272px;
}
html:not(.g-offcanvas-open) header#g-header, html:not(.g-offcanvas-open) section#g-navigation {
left: 0px;
}
html.g-offcanvas-opening header#g-header, html.g-offcanvas-opening section#g-navigation {
transition: ease left 300ms 0s, ease right 300ms 0s;
left: 272px;
}
html.g-offcanvas-closing header#g-header, html.g-offcanvas-closing section#g-navigation {
transition: ease left 300ms 0s, ease right 300ms 0s;
left: 0px;
}
However, I haven't been able to address the space between the top of the page and the menu or the space between the menu and the custom module. Thoughts?
Issue 2:
I can use padding to get the nav section under the header block, in the link, I've purposely left it in a position where you can see the Showcase position and mainbar items are placing themselves out of order and underneath the header section. Naturally I want those two items to come after the header.
Site link: www.seleatherfest.com/dev4/
help please,
Catherine
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
CatherineG - Change all of your custom CSS to this and it's a lot better - that logo is huge and taking up way too much screen real estate in my opinion - nevertheless it now works if you change the code to this...
#g-header { background-image: url("http://www.seleatherfest.com/dev4/images/sitegraphics/metalbackground200.jpg"); background-repeat: no-repeat; background-size: cover; } #g-header #g-content { margin: 0; max-height: 275px; padding: 0; } header#g-header { left: 0; position: fixed; right: 0; top: 0; z-index: 100; } section#g-navigation { left: 0; position: fixed; right: 0; top: 275px; z-index: 100; } #g-page-surround > section#g-navigation + * { padding-top: 385px; } .g-offcanvas-toggle { z-index: 110; } html.g-offcanvas-open header#g-header, html.g-offcanvas-open section#g-navigation { left: 272px; } html:not(.g-offcanvas-open) header#g-header, html:not(.g-offcanvas-open) section#g-navigation { left: 0; } html.g-offcanvas-opening header#g-header, html.g-offcanvas-opening section#g-navigation { left: 272px; transition: left 300ms ease 0s, right 300ms ease 0s; } html.g-offcanvas-closing header#g-header, html.g-offcanvas-closing section#g-navigation { left: 0; transition: left 300ms ease 0s, right 300ms ease 0s; }
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.
-
-
-
- CatherineG
- Jr. Rocketeer
- Posts: 34
- Thanks: 1
- Thank you for your help. I found out what it was. A module within the menu had a paragraph style and that created a ton of space between the top and the header and it's why the menu would not seat itself properly. Thank you for being fantastic!
-
The following users have thanked you: MrT
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
CatherineG - You're very welcome
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.
-
-
-
- Cody
- Newbie
- Posts: 1
- Thanks: 0
-
Hey Mark,
Thanks for the work around. I am using your fix on salient and I am having some issues with the mobile nav menu toggle not being fixed. My site is dev.dentalassistance.com Thanks for any help you may be able to offer!
Cody
-
Time to create page: 0.083 seconds