how to make the drop-downs be full width?

Hello-

I'm wanting my drop downs to be the full width of the menu itself so that all the page content beneath it is hidden...from one side to the other.

I see the following item in the styles.css:

}
.mega-menu .dropdown.fullWidth {
  left: 0;
  width: 950px;
  margin-left: -1px;
  border-radius: 5px;
}

But I'm not sure that's the right code, because I don't see a way to reference it from the admin area...and I wouldn't know exactly where to reference it from anyway...

Here's my site.

Click on Medically Guided Shopping in the menu. I've edited the topic area of the stylesheet and tried setting it to 100% width, but as you can see, it only expands to the right edge of the content area...how do I get it, and the categories item (Foot Care Products) to drop down at 100% menu width?

Thanks!

Steve

Hi Steve,

You can show the topic from the Mega Menu in full width by adding the fullWidth css class to the view. You can do this by editing the ~/Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Views/MegaMenu/TopicBlock.cshtml file in a text editor and edit it as shown below:

line 12: <div class="dropdown fullWidth">


the class in bold is the one that you should add.

Hope that helps!

Hmmm...
I'm not having the result I expected. I have two topics in my menu:
Medically Guided Shopping (using the built-in "MegaMenuTopic"), and a new topic I created named "Knowledgebase"

I did as you said, and edited the TopicBlock.cshtml accordingly, expecting both of the topics to drop down at fullwidth. I also went back into the mega menu styles.css and changed the width value I set at 100% back to 200px.

Because I also want my categories to drop down at full width, I also opened and edited the CategoryMenuTemplate.WithoutPictures.cshtml and found the dropdown...and added the fullwidth class to it, like with the topics.


When viewed in a browser, the default topic item (Medically Guided Shopping) reverted back to a 200px drop down...not fullwidth.....and the other topic still looks exactly the same...not full width, but also not at 200px.

The category drop down did get a little wider, but it is also not shown at fullwidth.

See it here

What am I missing?


EDITED
I just noticed that the W in fullWidth is uppercase. I fixed that on both views and it is now appearing differently...though not exactly what I expected or desired.

The categories didn't change at all, but the topics do drop down at full width, although the content inside the topic dropdown is squished into 200px..

So I just tried changing back the width set on the box class to 100% instead of 200px, and now the topics do display correctly...but the categories are back to 200px...how do I get them to be full Width as well?

OK..nevermind...I figured out that there were two dropdown divs on the CategoryMenuTemplate.WithoutPictures.cshtml. It looks perfect now-


Thanks-
Steve

Hi Steve,

I am glad you figured out what the problem is. Unfortunately CSS is really case sensitive. Your site does look very nice. Congratulations.

Thanks!