Responsive Menu Question(s)

I have modified the template to be an even 1000px wide rather than 980px.  I changed the media query in the 980.css and 980.rtl.css line to read:

@media screen and (max-width: 1020px) and (min-width: 769px) {

from its original code which was:

@media screen and (max-width: 990px) and (min-width: 769px) {

Now, the responsive menu is expanded automatically when the browser is between 990px and 1020px.  I dont see anywhere I can modify code to fix this. Can you assist?

Hi,

There are two other places that you should edit.

Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Themes/Lighthouse/Content/MegaMenu.css - you will need to update the media queries, so that it matches the new breakpoint.
The same number you should place in the Themes/Content/scripts/Lighthouse.js file in the line 28, where you have the pixels in the if statement.

   if (documentDimensions.width <= 990) {


Hope that helps!

Best Regards!

Perfect. Thanks.

One more thing. When I click on the responsive menu, I would like the dropdown menu to just overlap the content below. It currently pushes the content down. How can this be achieved?

Thanks again.

Hi jkeeler,

Yes you can, although I think it is not user friendly. You can do it by modifying the Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Themes/Lighthouse/Content/MegaMenu.css and add the following:

.mega-menu-responsive
{
position: absolute;
width: 100%;
}

Hope that helps!

So we have upgraded to 3.2 and now the menu structure has altered to only display categories. In order to keep the old menu structure, we moved the menu.cshtml view file and the controller from 3.1 to 3.2.  This works for full page views, but on responsive views, the menu is eliminated. Any assistance on this would be fantastic.

PS Mega Menu is not an ideal solution either as some of our links in the navigation are topic pages not covered in the mega menu settings. Mega Menu does not allow a custom menu to be created, only the ability to use pre-installed topic pages like about, contact, resources etc.

I think we found the issue, however I still would like to know how easily one can modify the links for the mega menu to allow for more than the one custom topic page "MegaMenuTopic" to the top nav.

Also, we were attempting to move the search box from the header to the sidebar so we cut out the below code and pasted it into our ColumnsTwo and ColumnsTwoHome files but the plugin does not seem to work as it did in the header.  The plugin should attempt to filter your search based on characters (currently set to 3) but this does not do it when we moved the code. Any ideas?

       <div class="search-box">
        @Html.Action("SearchBox", "Catalog")
       </div>

If you want to move this search topic to a different forum please do. Thanks.

HI jkeeler,

Here is an example for adding several topics in the Mega Menu view.
The topic could be edited from Content Management -> Topics->topicSystemName

    

MvcHtmlString topic1 = Html.Action("TopicBlock", "MegaMenu", new { systemName = "topic1" });
    MvcHtmlString topic2 = Html.Action("TopicBlock", "MegaMenu", new { systemName = "topic2" });

    if (Model.Settings.EnableMegaMenuTopic && !MvcHtmlString.IsNullOrEmpty(topic1))
    {
        <li>
            @topic1
        </li>
    }
    
    if (Model.Settings.EnableMegaMenuTopic && !MvcHtmlString.IsNullOrEmpty(topic2))
    {
        <li>
            @topic2
        </li>
    }

Moving the search box should not be a problem as long as you have only one search box on a single page as the javascript uses id to find the search element. Do you get any javascript errors?

Thanks

Sorry, I'm new and my question maybe simple and stupid.

How to set menu like your demo website? Just put first level of categories and put the second level of categories in drop-down list?

Hi goease,

The Nop Mega Menu plugin does all this automatically. It is just a matter of checking an option in the administration. The plugin has a rich administration with a lot of features from which you can choose what to display and how it should be displayed. You can have a look at its online documentation .

Should you need any further information, do not hesitate to contact us again!

Best Regards!