2 {{ upvoteCount | shortNum }}
2 {{ upvoteCount | shortNum }}

Menu Like ASOS Question (woocommerce) Ecommerce

by Teez
2 replies
  • WEB DESIGN
    • |
Hi all got a question about a wordpress menu, woo commerce and a possible plugin.

When you go to http://www.asos.com and you hover in navigation menu over 'men' it brings a drop down box with shop by item and shop by brand this is what I want to do with a particular themeforest theme.

Now the theme itself (Emigo - Fashion WooCommerce WordPress Theme - WordPress) doesn't do this out the box however the developer said that I should be able to find a woocomerce plugin or wordpress plugin that can help to do this only thing is Im not sure what to type to begin searching so said I'd ask from fellow comrades here.

Thanks folks.
#asos #ecommerce #menu #question #woocommerce #wordpress menu
  • Profile picture of the author 3wCorner
    You have to create a child theme for Emigo - Fashion WooCommerce WordPress Theme - WordPress theme and customize its menu and menu subitem css.

    As you can see in asos site, the menu has a div section and sub floor menu class:

    nav.site-navigation>ul.floor-menus>li div.sub-floor-menu {
    background: #fff;
    border: solid #000;
    border-width: 5px 0 0;
    -webkit-box-shadow: 4px 4px 7px 0 #969696;
    -moz-box-shadow: 4px 4px 7px 0 #969696;
    -o-box-shadow: 4px 4px 7px 0 #969696;
    box-shadow: 4px 4px 7px 0 #969696;
    display: none;
    left: -9999px;
    margin: 0 0 0 -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 34px;
    z-index: 101;
    }

    av.site-navigation>ul.floor-menus>li div.sub-floor-menu dl {
    border: solid #999;
    border-width: 0 0 0 1px;
    display: inline;
    float: left;
    margin-bottom: -10000px;
    overflow: hidden;
    padding-bottom: 10000px;
    }

    nav.site-navigation>ul.floor-menus>li div.sub-floor-menu dl dt {
    border: dashed #cacaca;
    border-width: 0 0 1px;
    color: #202020;
    font-family: Georgia;
    font-size: 1.05em;
    line-height: 2.0em;
    font-weight: normal;
    letter-spacing: 0.5px;
    padding-left: 10px;
    padding-right: 0;
    text-transform: uppercase;
    width: auto;
    }

    Of course, you are using different theme, so configure your menu class names with the css styles above. More or less, you can get your desired result.
    {{ DiscussionBoard.errors[10715535].message }}
  • Profile picture of the author Teez
    Thanks to 3W corner for the info

    I also think I found a plugin that does this too its called mega menu plugin :

    https://wordpress.org/plugins/megamenu/

    Hope this plus 3w corners advice can help someone else too
    Signature

    My first stab at success is the Nike Air Yeezys this is what made me believe.

    You can't be scared of rejection on the quest to perfection.

    {{ DiscussionBoard.errors[10715832].message }}

Trending Topics