Sticky Menu

greendome

How do make the menu sticky or fixed when scrolling down the page?

Thanks

Ninja

greendome
Hi
Apply the steps given in this doc : http://www.t3-framework.org/documentation/menu-system.html#sticky-menu
In JA Aiga template to make it sticky.
You have to apply it in tpls/blocks/header.php div class not on mainnav.

greendome

Hi,

In the 'tpls/blocks/header.php div class', I added this data-spy="affix" data-offset-top="70" but it doesn't work.

Header claass now looks like:
<header id="t3-header" class="t3-header" data-spy="affix" data-offset-top="70">

Also, in the navbar.less I added code below and then complied from LESS to CSS

 .t3-mainnav {
      border-left: 0;
      border-right: 0;
      margin-bottom: 0;
      border-radius: 0;
      left: 0;
      right: 0;
      top: 0;
      z-index: 999;

Any idea why this didn't work?

Thank you.

greendome

Just realised when compling LESS to CSS, I get the following error:

Error
variable @grid-float-breakpoint is undefined: failed at } /public_html/templates/ja_aiga/less/navbar.less on line 17
An error occurred. Failed to compile.

Lines 13 to 18 below but this is the default code and I've not changed it.

// Base Navbars
// --------------------------------------------------
.navbar {
  @media (min-width: @grid-float-breakpoint) {
  }
}

Ninja

greendome
Hi
Place this code in custom.css

.t3-header {
      z-index: 999;}

Also provide the URL of site here.

greendome

Hi,

I've added the suggested code in custom.css file, see screenshot below. Does this look right?

Just started new site on a local server but wanted sticky menu.

Thanks,

Ninja

greendome
Hi. If it not working kindly share the page url here. On local host it's hard to check the site.

greendome

Ninja

How do I send you the link privately as site is now on a developement server?

Thanks

Ninja

greendome
Hi
Edit fields in first post and submit login for staff : http://prntscr.com/13p3y5e

greendome

Ninja

I have done this now.

Can you also advise how to remove the menu icon for the sidebar position, please. I have disabled the module but not sure how to remove the actual icon.

Thank you

Ninja

greendome
Hi
Add this code in custom css

.t3-header.affix {z-index: 999;position: fixed;background:#fff;width:100%;}

Disable off canvas from template options http://prntscr.com/13phveh

Ninja

Ninja Disable off canvas from template options http://prntscr.com/13phveh

You missed it just disabled off canvas side bar 🙂

greendome

Thank you that worked 🙂

Can you also advise how to remove the menu icon for the sidebar (off-canvas) position, please. I have disabled the module but not sure how to remove the actual icon.

ps. I have switched from Gantry to T3 but finding it a little difficult to find a detailed template documentation.

Thanks

greendome

Ninja

Excellent - Thank you.