Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Horizontal Megamenu


kymation

Recommended Posts

I was able to get this megamenu to work correctly using an older version of oscommerce (Frozen) which uses Bootstrap 3, but the current version (https://github.com/gburton/Responsive-osCommerce) is using Bootstrap 4 and  seems to be creating problems with the layout because several of the tags are discontinued.  I have tried removing and substituting tags, but I was still unable to get the mega menu to appear correctly on my local site.  Any help would be appreciated. 

Example: tried replacing <li> tags with <div class="nav-item">

<a> to <a class="nav-link" ............>

 

Link to comment
Share on other sites

post a pic of what you have got so we can what the issue is. Bootstrap 4 will work with Mega menu, you can see an example here

https://bootsnipp.com/snippets/orE6Z

 

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Mega Dropdown</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Category</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category 1
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

          
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <span class="text-uppercase text-white">Category 1</span>
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>

 

Edited by JcMagpie

 

Link to comment
Share on other sites

  • 1 month later...

Does anyone have this working so the mega menu position is fixed to the top?  For me, the menu itself works, but for reasons I don't yet understand, when I add the  navbar-fixed-top to the css I loose the page scroll function so if the mega menu exceeds the screen height I can no longer scroll down the page....the scroll bar is present but if I remove navbar-fixed-top it allows me to scroll but the menu is not positioned where I would like.

I'm wondering if it is something that is easy to fix or if I'm in for a world of hurt?

Dan

Link to comment
Share on other sites

I dont use Maga menu but I do have a sticky navbar on my test site. https://chilleddisplays.co.uk

I first did this with css and ran into issues when it would not behave properly never did get tot the bottom of why! I ended up changing the class in the nav bar

to this and it worked as you would expect with no issues.

<nav class="navbar sticky-top <?php echo $navbar_style; ?> cm-navbar">

 

 

Link to comment
Share on other sites

Could not get sticky to work 🙄 but made it work with css by adding

#cm_header_megamenu{   position: fixed;
     z-index: 9999;
 }

.yamm .dropdown-menu {
        left: auto;
        max-height:400px;
   overflow:scroll;

so menu is fixed and drop down has scroll. It's on the test site, not sure if this is what you were after.

image.thumb.png.744b8d6481e71e613bd2e37c560728f0.png

 

Link to comment
Share on other sites

1 hour ago, JcMagpie said:

I dont use Maga menu but I do have a sticky navbar on my test site. https://chilleddisplays.co.uk

I first did this with css and ran into issues when it would not behave properly never did get tot the bottom of why! I ended up changing the class in the nav bar

to this and it worked as you would expect with no issues.


<nav class="navbar sticky-top <?php echo $navbar_style; ?> cm-navbar">

 

I didn't try sticky-top...thanks for the idea, I'll give it a try. 

Playing around with it a bit more I realized that the z-index on nav-fixed-top was hiding the page scroll...it scrolls behind the menu...changing the z-index allowed me to see that.  It looks like it is the menu itself that doesn't scroll using nav-fixed-top, not the page.  I noticed in your second post that you set max-height to 400. Out of curiosity, what happens without that...will the menu still scroll?

Okay I'm off to try sticky top.

Dan

Link to comment
Share on other sites

Sticky seems to produce a much better result.....it is now close to working as I want.   The only apparently problem at this point is that the sticky mega menu now scrolls off the top when I scroll down page and it reaches the boxes I have installed in the left column.  At that point it looks like the box push the sticky mega menu off the top of the page as I scroll down.  Seems a bit odd but hopefully I'll discover why.

Dan

Link to comment
Share on other sites

1 hour ago, Dan Cole said:

I noticed in your second post that you set max-height to 400. Out of curiosity, what happens without that...will the menu still scroll?

Oh I did that just to keep all the drop downs a sensable size.  Without is you can have some long and some short depending on whats in them. It will work fine with out that also.

It's strange how when I installed mega menu on the test site Sticky-top did not work? I have it already set for the main Nav bar so It may have somthing to do with Mega menu also using the nav class, so perhaps it needs a new class for the second one?

<nav class="navbar sticky-top nav2<?php echo $navbar_style; ?> cm-navbar">

This example shows it in a bit more detail.

https://www.codeply.com/go/DpHESPqZsx

 

Link to comment
Share on other sites

I think the sticky element might be the problem...what I read suggests that...

Quote

Sticky-positioned elements are only sticky within their parent element.

Dan

Link to comment
Share on other sites

  • 2 months later...

I've stalled this add-on onto a fresh OSC 2.3.4.1CE. All appears in the admin as expected but nothing shows on the front end. I've checked the page source and the HTML for the Mega Menu is there but no categories appear. I have checked the error logs and I'm getting this warning:

count(): Parameter must be an array or an object that implements Countable in includes\classes\category_tree_megamenu.php on line 265

the line in question is:

if (count($category_structure) > 0) {

I'm assuming this is a PHP issue. I'm running this on a local WAMP server which is running 7.2.14. Can anyone help with what the correct code should be?

Ah, the world wide web. What a wonderful place.

Link to comment
Share on other sites

  • 1 month later...
On 6/13/2019 at 3:45 PM, freakystreak said:

I've stalled this add-on onto a fresh OSC 2.3.4.1CE. All appears in the admin as expected but nothing shows on the front end. I've checked the page source and the HTML for the Mega Menu is there but no categories appear. I have checked the error logs and I'm getting this warning:


count(): Parameter must be an array or an object that implements Countable in includes\classes\category_tree_megamenu.php on line 265

the line in question is:


if (count($category_structure) > 0) {

I'm assuming this is a PHP issue. I'm running this on a local WAMP server which is running 7.2.14. Can anyone help with what the correct code should be?

I'm having the same issue, did you ever fix it?

Link to comment
Share on other sites

8 minutes ago, Omar_one said:

@LeeFoster try to change this line

 


if (count($category_structure) > 0) {

to


if (is_array($category_structure) && count($category_structure) > 0) {


 

I now get -

Warning: sizeof(): Parameter must be an array or an object that implements Countable

Link to comment
Share on other sites

9 minutes ago, LeeFoster said:

I now get -

Warning: sizeof(): Parameter must be an array or an object that implements Countable

the line no.. or post the line

Edited by Omar_one

Get the latest Responsive osCommerce CE (community edition) here .

Link to comment
Share on other sites

Link to comment
Share on other sites

2 minutes ago, raiwa said:

if (isset($category_structure) && 

Try this

 

Still the Sizeof() error.

Am I missing something though and the code that leads to $category_structure below refers to 'visibles' and that doesn't appear anywhere in my categories table.

$category_structure_query_raw = "
      show columns 
      from 
        categories
      where 
        field like '%visible%'

 

Link to comment
Share on other sites

It's going to be both. You will need to find all of the PHP issues caused by the move to 7.3, then upgrade from BS3 to BS4.

The "%visible%" thing is a test for the presence of one of the hidden category mods. If it is found, the code will hide the categories as required, otherwise it will be ignored. That should not be an issue for you.

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

It was written for the 5.x series, but with as many of the 7.x requirements as I knew about at the time. Not all of them, obviously.

Regards

Jim

 

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 4 months later...
  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...