RocketTheme - TOPIC: Creating a fixed header&navigation in Callisto (NEW AND UPDATED) (6/8)

Welcome Guest! Login

0 items Join Now

MrT
Preeminent Rocketeer
Posts: 101084
Thanks: 13481
Web Designer/Developer

Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 8 months ago

Cody - this code was designed for Callisto - for Salient template the complete code would now need 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: 0;
    z-index: 100;
}
#g-page-surround > section#g-navigation + * {
    padding-top: 105px;
}
.g-offcanvas-toggle {
    z-index: 101;
    position: fixed;
    top: 16px;
}
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;
}
html.g-offcanvas-open .g-offcanvas-toggle {
    left: 288px;
}
html:not(.g-offcanvas-open) .g-offcanvas-toggle {
    left: 16px;
}
html.g-offcanvas-opening .g-offcanvas-toggle {
    left: 288px;
    transition: left 300ms ease 0s, right 300ms ease 0s;
}
html.g-offcanvas-closing .g-offcanvas-toggle {
    left: 16px;
    transition: left 300ms ease 0s, right 300ms ease 0s;
}

Regards, Mark.

The following users have thanked you: Adam Jacobi, Cody
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.

#1229293

- Gley
- Newbie
- Posts: 19
- Thanks: 0
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 8 months ago
- Hi,
  I have some questions :
  1-there is a problem with the anchor and the page surround padding top. When i click the link "Au quotidien" or "Mes derniers billets" of the animated block the beginning is cut. Link web site in secure page.
  2- how can i reduce the height of navigation section? the code i use didn't centralise the menu...
  3- how can i put a grey horizontal line, like the red one but on the bottom, of the navigation section?
  4- how can i made the smooth effect for the anchor like for the totop button?
  
  My SCSS:
  }
  
  section#g-navigation {
  left: 0px;
  position: fixed;
  right: 0px;
  top: 0px; /* You may have to alter this value */
  max-height: 100px;
  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;
  }
  
  Thanks a lot for your help
- Last Edit: 8 years 8 months ago by Gley.
#1229784
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Gley - this is not the place to be asking all these unrelated questions - you should be raised a new topic for each of your questions
  
  1. You trying to link to a bookmark called "#billet" and that does not exist anywhere on the page so it does nothing.
  2. Use this code...
  
  #g-navigation > .g-container { margin: auto auto; }
  To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
  
  Remember to recompile CSS from base outline too.
  
  And the code was never intended to centralise the menu?
  
  3. Use this code...
  
  #g-navigation { border-bottom: 5px solid gray; }
  
  4. http://www.rockettheme.com/forum/joomla-template-callisto/243664-smooth-scrolling-creating-your-first-atom-revised
  
  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.
#1230060
- Gley
- Newbie
- Posts: 19
- Thanks: 0
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Thank you very much for the different answer and sorry for the different questions in the same topic.
  For the first one, I repare the anchor. My probleme is still that the fixed navigation menu cut the beginning of the different section like "above" or "mainbar" when i click on "billet" or "au quotidien"?
#1230208
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- It's actually positioning correctly - the browser is scrolling to move the anchor to the top of the page - it doesn't know you've put a fixed header in the way. You can easily get around it though withy this trick - this is an example for youyr "billet" anchor...
  
  #billet { margin-top: -60px; padding-top: 60px; }
  
  That basically allows for the depth of your fixed header.
  
  To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
  
  Remember to recompile CSS from base outline too.
  
  Regards, Mark.
- The following users have thanked you: Gley
- 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.
#1230347
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- This plus the custom css guide you pointed to ought to do the job eventually for us (using Salient).
  
  I said eventually because I have never worked with CSS and am just starting to get comfortable with Gantry 5. I am an experienced programmer of embedded software, but have done hardly any web programming. I'm doing this as a volunteer to help out a nonprofit. I will probably have to ask quite a few supplementary questions to get this all working.
  
  I am assuming that the file for custom CSS that is referred to I will have to set up via cpanel file manager, since I don't see an obvious way to do it from within Joomla!.
#1234248
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Kanata United Church - normally you would do this via ftp (since joomla does not support editing of scss files), but, yes, you can do it via your cPanel file manager if you prefer.
  
  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.
#1234255
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Thanks for putting this together.
  
  I have set up a custom scss file as recommended and put this code into it (along with a comment to identify what it does) so that I can try freezing the nav at the top in Salient. But I'm such a newbie that I can't find where in the menu system to recompile the Gantry CSS. I think I did come across it weeks ago but have forgotten where.
#1234692
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Gantry 5 themes > configuration > base outline > styles tab "recompile CSS" button top right.
  
  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.
#1234782
- Kanata United Church
- Rocketeer
- Posts: 53
- Thanks: 0
Re: Creating a fixed header&navigation in Callisto (NEW AND UPDATED)

Posted 8 years 7 months ago
- Thanks.
  
  Very sensible path to get there, but I just had not started in the right place.
  
  So I recompiled, with the new custom CSS file in place. Saved templates. Cleared cache. But the header/nav area still scrolls with the rest of the page.
#1234864

Time to create page: 0.073 seconds