Creating a fixed header&navigation in Callisto (NEW AND UPDATED)
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I can't find your custom CSS file?
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.
-
-
-
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
-
Thanks for the quick response.
I now see the problem. I misunderstood the instructions and created the custom scss file at the root of the Joomla! installation not the root of the theme.
I moved it to its proper location and recompiled again. This time your code was compiled but the effect was not what I wanted.
What I really wanted was to freeze just the navigation header. What I got was a big frozen version of Header A which covered up the navigation header leaving me with no main menu. So I commented out your code and recompiled. The site is now back to its original state.
(Too bad that CSS syntax seems not to permit commenting out a block of code that itself contains comments, but fortunately for me your code has no comments in it.)
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Kanata United Church - as you can already see from this topic, lot's of members have already used my code and it does work as described (fixed header AND fixed navigation). Also, there are comments in my code that indicate where you will have to change values if you have (for example) a different sized logo.
If you want a fixed header AND fixed navigation then this code does work. If you want something different to that then that is considered as a customization request which falls way beyond the scope of this free support forum. You can always try to post your request in our The Marketplace forum and get (paid) support from someone that is willing to do this.
If you do want this solution I can help you to get it to work but you will have to reinstate the code that I provided. Please would you post your URL, superuser id and pswd in the secure tab of your post and i'll have a look for you. Also, Please post your FTP logon, password and FTP URL in the secure area of your post.
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.
-
-
-
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
-
Thanks, Mark. I appreciate your help.
Gantry is so flexible, there are millions of ways to use any template. Chances are I messed up your intended actions by disabling page elements you expected to be there.
I have reposted the login details in the secure area, the same ones I posted a little earlier in this thread.
The file that gave a 404 was indeed not there at the time (that was the cause of my original problem), but I fixed that and just verified with my text editor that the URL you gave now works.
The code I used was the variant you described as corrected for Salient. I don't see any comments in it. But if I search back to the earlier code for Callisto that started this thread, chances are there will be useful comments.
It looks as if the first 2 code blocks are key, and the rest is mostly dealing with off-canvas issues. But I am still so new to CSS that I don't yet understand why all of it is there.
I was hoping that freezing a little less (just down to the bottom of the nav/menu panel) would be easy, perhaps just editing out a small part of the code and changing the height covered. If it is not, I will probably just give up on adding this feature. It's not a big requirement, and I just don't have enough volunteer time on top of my day job. And there is no budget to hire someone.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I don't see any of the code in the custom CSS file? So therefore I can't make suggestions how to modify it.
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.
-
-
-
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
-
Thanks for your continuing efforts to help.
I just tried the external URL for the custom.scss file, that you posted in the secure area a few posts back in this thread. My text editor can see the code. But all the active code is commented out so that the navigation bar remains available for the other person working on this site.
I'm not sure where/how you are looking at the code but I am guessing inside Joomla!. I don't know the Joomla! site build process but maybe when the CSS is recompiled, the contents of the custom.scss file are merged with the referenced base code, and maybe that process throws away all comments to speed run time interpretation. In that case you would indeed see nothing because the file is 100% comments at the moment.
We have not been using FTP with this site, but I could set up FTP access for you.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I think we're going around in circles a bit here. I want to see the code that my tutorial provided live and working on your site so i can advise you how to modify it to suit the template you are using and your requirement.
When I check the custom CSS file on your site (see secure) I can see that you have commented out all the code in that file so that none of it is active... therefore I cannot see it's effects or advise you what to change.
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.
-
-
-
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
-
Hello again, and thanks for continuing to help.
I have experimented with commenting out parts of the code. If I comment out the fixed header code but leave the fixed navigation bar, and adjust the padding a little, I get something very much like I want, when I view it on my big screen.
Minor issue: smaller nav bar (vertically) would be good, especially for tablets and phones.
Major issue: it does not behave well when the width is reduced to a typical mobile screen size. Only the last few words of the header phrase are visible; the rest is hidden under the fixed nav header. It messes up as soon as the menu moves off-canvas, so chances are that it can be fixed using the same off-canvas-toggle used in some of the other code.
There is a reverse issue for the one Animated Block, whose headline text is too big on a large screen but fine on smaller ones. If you prefer I will move that issue to a separate thread.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Please just change your second CSS statement from:
#g-page-surround > section#g-navigation + * { padding-top: 120px; }
to:
#g-page-surround > section#g-navigation + * { padding-top: 200px; }
Then it works fine.
Regards, Mark. -
The following users have thanked you: 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.
-
-
-
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
-
Thanks, that works very nicely.
Now my next experiment is to reduce the height of the nav bar from 100px to about 80 or 90 and see if it still looks OK. If so, I can then reduce the padding to twice the new height so that the frozen area uses less screen on a mobile. It would be helpful if you could indicate whether that is best done by an addition to this same custom.scss file or by an override elsewhere.
We may still end up going back to the original scrolling design, because of the increasing importance of mobile. Or wait until there is a Gantry 5 template that supports the kind of auto-hide used for the RocketTheme web site. - Last Edit: 8 years 6 months ago by Kanata United Church.
-
Time to create page: 0.073 seconds