Same menu as 'New' (from home of the Storefront template)?

Hello,
I would like to get the same menu as 'New', with several submenus (Tabs GK5 from home of the Storefront template).
But this time on the home of Quark E-commerce.

Is it possible?
Should we just add the CSS 'bigtitle' (Module suffix from Storefront Tabs GK5) to 'template.ecommerce.css'?

Best regards.

Hello,
In fact it's good I found the solution.

I have another question...
How to get the small animation when the mouse clicks on one of the menus FEATURED NEW HIT SPECIALS RANDOM RATED (Storefront's demo website)?
Best regards.

Hi

Animation is done thanks to this css:

Code: Select all

.gkTabsWrap ol li {
    border: medium none;
    color: #1b1d1f;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 36px;
    line-height: 37px;
    list-style-type: none;
    margin: 0;
    padding: 0 6px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease-out 0s;
}

.gkTabsWrap ol li.active {
    margin: 0 12px;
}

.gkTabsWrap ol li.active,
.gkTabsWrap ol li.active:hover {
    background: #1b1d1f none repeat scroll 0 0;
    color: #fff;
    padding: 0 20px;
}


Thank you !
I used only part of the code because the result was the same. The animation is not perfect. Do you have an idea to improve it and get an identical result to the home of the Storefront template?

The site is under construction: https://www.stand-broker.fr
NOUVEAUTÉS | FOCUS PRODUITS menu.
Best regards.

Hi

Try with this:

Code: Select all

.transparent-tabs .gkTabsNav li {
    margin: 9px 0;
    padding: 0 6px;
}

.transparent-tabs .gkTabsNav.dark-tabs li.active {
    margin: 9px 12px;
    padding: 0 20px;
}