GK Menu Extended Parameters - 3 collumn

Hello, I seem to have problem creating a 3 collumn menu.

All I can get is a 2 collum with the second collum have 2 groups stacked on each other.

I followed this tutorial:
https://www.gavick.com/documentation/un ... s-in-menu/

Also, we can't seem to be able to use the [icon-heart] in the menu item titles, nor the ICONS - FONT AWESOME class name. We would like to use those to populate the menu items with visuals.

Any clues?
http://miggg.quebecguitare.com/

(teitbite has full access to this site).

Hi

Add this to override.css for the menu:

Code: Select all

#gkMainMenu .gkMenu > ul li div.childcontent {
    width: auto !important;
}


for icons a syntax as [icon-heart] is not implemented for menu, but using extended parameters for font awsome classes should work. May need a small adjustment, but please try it first like "fa fa-facebook" in extended parameters.

The override worked. Thank you


For the font-awesome, the element appears but the class is not recongnized.
I've added a simple code as "fa-thumb-tack" in the menu params (Gavick Pro) / additionnal class.

Snippet in attachment.

Regards

Hi

I think You need to use 2 suffixes "fa fa-facebook". The "fa" alone tells to use FontAwsome.

To remove icons from list elements add this to override.css

Code: Select all

#gkMainMenu .gkMenu > ul li:before {
display: none;
}


The code did the job removing the extra icon.

The fontAwesome still won't work. I tried "fa fa-facebook" with and without the first "fa". Quote, unquote. No luck.

Still have just a square besides the menu element.


regards

Hi

Suffixes are correct now. Just the font is overwritten in css to Arial. Please add this to override.css:

Code: Select all

.fa:before {
    font-family: FontAwesome !important;
    margin-right: 5px;
}


It works. The only thing is that the icon ratio is bigger and not as clean as they are in their original size (more aliasing).

See reference and screenshot.
http://demo.gavick.com/joomla25/john/in ... typography


Any clues?

Thank you

I also noticed that it will alter the font from a top menu item (see contact).

Hi

Looks like You have figured it out with this code:

Code: Select all

.fa:before {
    font-family: FontAwesome !important;
    margin-right: 5px;
}


You can add this to be more accurate and make more changes.

Code: Select all

#gkMainMenu a.fa:before {
    font-family: FontAwesome !important;
    font-size: 25px;
    margin-right: 9px;
}


Hi Teitbite, I tried the code.

What I notice is that when a Font Awesome "additionnal class" is added to a menu item, the font of the menu item changes as well. In other words, not only an icon for "Font Awesome" is added before the menu item, but it also changes the font from "Ubuntu Regular" to "Font Awesome".

I tried changing the code doing the following, but the Font Awesome Icon disapear leaving and unrecongnized symbol (empty square), and the font is unaltered; stays "Font Awesome".

Code: Select all

/* For font-awesome in the main menu */
#gkMainMenu a.fa:before {
    font-family: Ubuntu !important;
    font-size: 14px;
    margin-right: 9px;
}


Any Clues? I would like to keep the original Ubuntu Font that comes with the John Template, using the font Awesome Icons.

Thank you
Regards

Hi

Your code was close, but mistaken. Try this one:

Code: Select all

#gkMainMenu a.fa:before {
    font-family: FontAwesome !important;
}

#gkMainMenu a.fa {
    font-family: Ubuntu !important;
}


Thank you.

It worked but I had to reverse the order of command:

Code: Select all

/* For font-awesome in the main menu */
#gkMainMenu a.fa {
    font-family: Ubuntu !important;
    font-size: 14px;
    margin-right: 9px;
}

#gkMainMenu a.fa:before {
    font-family: FontAwesome !important;
    font-size: 14px;
    margin-right: 9px;
}


Regards

Now the submenu items are all affected with the Ubuntu font.

I would like to keep the original Font for the tempate with is Arial. I tried the following override but it doesn't have any effect.

I think it's my variable (all submenu items):

Code: Select all

/* For font-awesome in the main menu */

#gkMainMenu a.fa {
    font-family: Ubuntu !important;
    font-size: 14px;
    margin-right: 9px;
}

#gkMainMenu a.fa:before {
    font-family: FontAwesome !important;
    font-size: 13px;
    margin-right: 5px;
}

/* Exclude submenu items */
#gkMainMenu .gkMenu > ul li div.childcontent {
    font-family: Arial, Helvetica, sans-serif;
}



Hi

Code: Select all

#gkMainMenu .gkMenu > ul li div.childcontent a.fa {
    font-family: Arial, Helvetica, sans-serif !important;
}

#gkMainMenu .gkMenu > ul li div.childcontent a.fa:before {
    font-family: FontAwesome !important;
}