Creating a fixed header&navigation in Callisto (NEW AND UPDATED)
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
This code has now been updated to work correctly with the mobile offcanvas menu and Gantry RC3. It wholly replaces the code that I gave in the first release of this tutorial.
Please note that you will have to alter two values in the code (where I have indicated) if your header height differs to that of the Callisto demo. Please also note that in order for this code to work then you MUST be using an outline that contains both the header and navigation section.
Regards, Mark.
Many of the recent G4 templates offered the facility to fix the header and navigation. This has not yet been implemented in Gantry 5 and Callisto. However, you can still achieve this in Callisto by using a little custom CSS...
header#g-header { left: 0px; position: fixed; right: 0px; top: 0px; z-index: 100; } section#g-navigation { left: 0px; position: fixed; right: 0px; top: 90px; /* 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; }
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. - Last Edit: 9 years 7 months ago by MrT.
-
The following users have thanked you: Chris_Twemlow, Jeff Boulton, Paolo Coveri, Josep M, MartinK, betonicah, jtechmedical, Eoin, Zesharck, Kanata United Church
- 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.
-
-
-
- Jeff Boulton
- Hero Rocketeer
- Posts: 377
- Thanks: 6
- 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. Jeff
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
Regards, Mark. -
The following users have thanked you: Paolo Coveri
- 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.
-
-
-
- jtechmedical
- Hero Rocketeer
- Posts: 434
- Thanks: 15
-
I would like to add some space between the bottom of the header (with the logo and icon menu) and the top of the navigation (with the menu and social) so the icon menu has a little bit of space surrounding it instead of sitting right on the bottom. I am looking for the header to be more like the header in the demo. I have included screen caps of my header vs the demo header below.
I tried adding padding-bottom: 25px; to the header#g-header section but it didn't work.
Any help you can offer would be great.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
jtechmedical = just so I am absolutely clear - Please do a screengrab and annotate to show where. Also, could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
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.
-
-
-
- jtechmedical
- Hero Rocketeer
- Posts: 434
- Thanks: 15
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I'm more than happy to help. Thanks for the login details. If I could just have a link to your site to go with them I'll be able to look for you.
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.
-
-
-
- jtechmedical
- Hero Rocketeer
- Posts: 434
- Thanks: 15
- blog.jtechmedical.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
jtechmedical - okay so because your logo is a bit bigger than the one I used the CSS needs to be...
header#g-header { left: 0; position: fixed; right: 0; top: 0; z-index: 100; } section#g-navigation { left: 0; position: fixed; right: 0; top: 110px; z-index: 100; } section#g-showcase { padding-top: 180px; } .g-offcanvas-toggle { z-index: 110; }
Regards, Mark. - Last Edit: 9 years 8 months ago by MrT.
-
The following users have thanked you: jtechmedical
- 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.
-
Time to create page: 0.080 seconds