Public Forums 71,145 posts

[congeladosemcasa Friend congeladosemcasaJoin date: April 2006Posts: 31Downloads:2Uploads:2 Thanks: 2 Thanked: 6 times in 1 posts]

#186427

Hello:

I using T3V3 blank 1.2.1 on J2.5.9.

While customising the template to my needs, I managed to get the Logo, Megamenu and Search on the same block.
But I’m having a few problems making this modification work.

In variables.less I changed the @navbarCollapseWidth variable from 767px to 979px, as the menu flowed into two lines at that width and under.

The menu collapses at 979px as expected, but:

1. When the “hamburguer” button is clicked… the off-canvas navigation doesn’t show (the button does work when off-canvas navigation is disabled in the template’s configuration: the menu is shown taking all screen space available).

2. At 767px, the “hamburguer” button’s gray background no longer strecthes at 100% width and it is not fixed anymore. But… off-canvas navigation is shown properly.

Does anyone have a clue as to how to make this work?

My website (not everythin looks nice: still developping): http://triangulodigital.dnsalias.com/letscopy/pt/

Thanks!

[congeladosemcasa Friend congeladosemcasaJoin date: April 2006Posts: 31Downloads:2Uploads:2 Thanks: 2 Thanked: 6 times in 1 posts]

#488768

I found a parcial solution:

In the folder my_template_root_folder/plugins/system/t3/base/less/ one can find:
– off-canvas.less
– megamenu-responsive.less.

In this folder there is also a variables.less.
This this is the file for which off-canva.less and megamenu-responsive-less look for variables.

Therefore, since my custom @navbarCollapseWidth definition is on the template folder, not the plugin folder, the new width is not picked up.

One could edit this LESS files on the plugins folders, but a plugin update would destroy the override.
So, one must override this files on the template folder – even better if one does it in a theme – to avoid this issue.

This is how I did it:

1. I copied the contents of off-canvas.less to template.less in the folder for the theme I created, except for the first 24 or 25 lines (Variables and Mixins bit). My theme folder also has a variables.less file with the new @navbarCollapseWidth, so now off-canvas works fine.

2. I copied the megamenu-resposive.less file found at the template’s folder to my themes folder. Then I removed the first 22 or 23 lines (all the way to “Extend Style in Base” bit).

3. From the plugin’s megamenu-resposive.less I took this bit:


// Menu Grids
// ----------
.row-fluid,
.mega-dropdown-menu,
.row-fluid {
width: 100% !important;
min-width: 100% !important;
left: 0 !important;
margin-left: 0 !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}


and placed in my theme’s megamenu-resposive.less, replacing lines 44-49, more or less.

It works!
And, I believe, it is safe to upgrade the plugin and, maybe, even the template itself, since all modifications are made on a custom theme.

The only piece that still doesn’t work as expected: under 767px the navbar is not fixed on the top of the browser, it scrolls with the rest of the page.

2 users say Thank You to congeladosemcasa for this useful post

1. JA Developer
2. Saguaros

[Author]

Posts