how to recreate store menu

ramarajuDS · January 2016

Hello,

Please guide us in recreating a similar menu with different columns and images.

Reference http://themes.muffingroup.com/be/store/

Albert · January 2016

Hi,

this is Stack: Center header type with Mega Menu. Header type can be changed under Theme options > Header & Subheader > Header section but all details about Mega Menu you can find on http://themes.muffingroup.com/betheme/documentation/#menu

ramarajuDS · February 2016

I tried it by activation of megamenu.

But could not get the similar once as Shop in Demo.

I need to know if I have to install any plugin ?

ramarajuDS · February 2016

If possible you can look at my site.

Albert · February 2016

What's the link to your site and what is happening exactly?

ramarajuDS · February 2016

I have imported the demo content and activated the Mega menu in Appearance --> Menu

But I could not still recreate the menu in http://themes.muffingroup.com/be/store/

My testing site is --> http://128.199.118.62/

Please let me know how to recreate such a menu as in Demo

i.e

1. With out line in the drop down box.

2. With Images in the Menu

Albert · February 2016

As we see, you got Mega Menu already which looks good. Except what you did so far, you need to use extra css that we used on our demo as well:

/* Menu */
#Top_bar .menu > li > a { font-weight: bold; letter-spacing: 2px; }
#Top_bar .menu > li > a span:not(.description) { border-right-width: 0px; }
#Top_bar .menu > li > a:after { background: #c4b392 !important; }
#Top_bar:not(.is-sticky) .menu > li > a:after { left: 10%; top: 50px; width: 80%; height: 4px; }
#Top_bar .menu > li ul li a:hover, 
#Top_bar .menu > li ul li.hover > a { background: #e7e7e7; }
#Top_bar .menu > li > ul.mfn-megamenu a.mfn-megamenu-title { font-size: 14px; letter-spacing: 2px; }

ramarajuDS · February 2016

Thanks for the reply ..

But it didn't help at all.

Please give the instruction on

1. How to remove lines in the Mega menu's drop down.

2. How to add images to the Mega Menu

Please find the attachments below (Links)

MyTest Mega Menu -

http://128.199.118.62/wp-content/uploads/2016/02/MyTestWebsite.png

Mega Menu on the Betheme Demo - Store

http://128.199.118.62/wp-content/uploads/2016/02/Betheme_Demo_Store.png

Albert · February 2016

1. To remove the lines from Mega Menu, you need to use:

#Top_bar .menu li ul li a { border-bottom: 0 !important; }
#Top_bar .menu li ul { background-image: none !important; }

2. To set background for mega menu, you need to use Background Image URL option which is under each menu item under Appearance > Menus section.

ramarajuDS · February 2016

When I tried it problem 1 got resolved, But the problem 2 is not yest resolved

I guess both are conflicting with each other ..

Am I right ?

Albert · February 2016

What you tried exactly and where the problem is?

how to recreate store menu

Comments