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

Support desk for Multipurpose Quark Theme
GK User
Fri May 19, 2017 3:44 pm
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.
User avatar
Senior Boarder

GK User
Mon May 22, 2017 10:15 am
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.
User avatar
Senior Boarder

teitbite
Wed May 24, 2017 1:49 pm
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;
}
User avatar
Moderator

GK User
Tue Jun 06, 2017 5:15 am
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.
User avatar
Senior Boarder

teitbite
Thu Jun 08, 2017 12:24 pm
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;
}
User avatar
Moderator


cron