fbpx

Astroid Framework - Next generation Joomla template builder Download Astroid

Welcome, Guest
Username: Password: Remember me

TOPIC: Mega Menu Colour Problem

Mega Menu Colour Problem 2 months 2 weeks ago #11470

First of all, great framework.

I have recently been implementing a fresh website with your framework, but have hit a few problems with the Mega Menu.

The main problem is the colouring of the items. The colours set in the backend interface of your template do not get transferred into the frontend.

Specifically, it is the hover colours that don't transfer. The hover colour of the text defaults to black/grey, and the background hover colour does not change at all.

I am aware that these settings are applied in colors.php, but it appears that these settings are being overridden elsewhere. For the text at least I have managed to remove the code that was overriding, which is in _header.scss:

.astroid-nav .megamenu-container a.nav-link.megamenu-title:hover {
   background: inherit !important;
   color: currentColor !important;
}

I changed it to this:
.astroid-nav  {
   background: inherit !important;
   color: currentColor !important;
}

...and the issue goes away for the text. However the background colour still doesn't work.
I should also point out that the standard dropdown menu works perfectly. It is just the Mega Menu with the problem.

I also have a couple of general comments:

  1. Could you make the offcanvas on the right as well as the left for a future release. I have already implemented this myself, but it would be great if it was an option

  2. For the menu easing animations it would probably be good to have the option to set a different opening and closing animation, as some of the animations look great when opening the menu, but a bit clumsy when closing it

If you need any further info let me know.
The administrator has disabled public write access.

Mega Menu Colour Problem 2 months 2 weeks ago #11494

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 2096
  • Thank you received: 314
  • Karma: 61
Hello,

Thank you for the kind words, this is exactly what keeps us going.

A. I think the menu issue is fixed in the dev version (We have been working on this for over a few months now with a lot of fixes and plan to release it very soon), download a copy here: github.com/joomdev/Astroid-Framework/archive/dev.zip (this will override your _header.scss and any other modifications you have made to the core files of Astroid.)
colors.php issue (here is how frontend overrides work github.com/joomdev/Astroid-Framework/wik...end-folder-overrides)
1. Glad you worked this out, Like 2 more users asked for this, Do you mind sharing the code on how you did it? Yes, this is going to be a feature in the upcoming release.
2. This is a good UX improvement, I didn't notice it until I saw this post. I'll circle back to the team to see the best way to implementing this without complicting it too much for the end user. Question: how would you do it and what animations would you offer?

Thanks again and I am glad you are using the framework. Please let us know if there is anything else we can assist you with?

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Mega Menu Colour Problem 2 months 1 week ago #11513

I have already looked at the dev channel on github and noticed you made some changes, but I didn't take the whole contents of _header.scss. I will take another look. I am also aware of the method of overrides for php files, but thanks for the link.

For the off canvas. The implementation is adjustment to your code rather than making the two options available, as I will never use the left off canvas. The main reason for this because I find it confusing once you are on mobile as it is in the same place as the mobile nav.

Here is the adjusted code anyway:

offcanvas.php

switch ($effect) {
   case 'st-effect-1':
      $style .= '.st-effect-1.astroid-offcanvas{visibility:visible;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}.st-effect-1.astroid-offcanvas-open .st-effect-1.astroid-offcanvas{ visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}.st-effect-1.astroid-offcanvas::after{display:none;}';
      break;
   case 'st-effect-2':
      $style .= '.st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(-' . $panelwidth . ', 0, 0);transform:translate3d(-' . $panelwidth . ', 0, 0);}.astroid-offcanvas-opened .astroid-wrapper{background:rgb(173, 181, 189);}.st-effect-2.astroid-offcanvas{z-index:0 !important;}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{visibility: visible; -webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}.st-effect-2.astroid-offcanvas::after{display:none;}';
      break;
   case 'st-effect-3':
      $style .= '.st-effect-3.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(-' . $panelwidth . ', 0, 0);transform:translate3d(-' . $panelwidth . ', 0, 0);}.st-effect-3.astroid-offcanvas-open .st-effect-3.astroid-offcanvas{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}.st-effect-3.astroid-offcanvas{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}.st-effect-3.astroid-offcanvas-open .st-effect-3.astroid-offcanvas{visibility:visible;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}.st-effect-3.astroid-offcanvas::after{display: none;}';
      break;

_offcanvas.scss

.off-page-content{
   position: fixed;
   top: 0;
   height: 100%;
   z-index: 10001;
   .off-page-inner{
      position: relative;
      z-index: 2;
      background: $white;
      height: 100%;
      overflow-y: auto;
   }
   .off-page-close{
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      text-align: center;
      line-height: 40px;
      background: $white;
      color: $black;
      font-size: 16px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      border-left: 1px solid #eee;
      &:after{
         content: "\2715";
      }
   }
   .off-page-overlay{
      position: fixed;
      display: none;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0,0,0,0.6);
   }
}

.astroid-offcanvas{
   position: fixed;
   top: 0;
   right: 0;
   padding: 10px;
   z-index: $zindex-popover;
   visibility: hidden;
   height: 100%;
   background: $white;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   max-width: 100vw !important;
   &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(173, 181, 189,0.6);
      content: '';
      opacity: 1;
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
      display: inline;
      content: "";
      clear: both;
   }
   .close-offcanvas, .close-offcanvas:hover {
      color: $black;
      background: $white;
      display: block;
      margin-top: 0;
      position: absolute;
      left: -40px;
      z-index: 999999;
   }
   .burger-menu-button .inner,
   .burger-menu-button .inner::before,
   .burger-menu-button .inner::after {
      background-color: $black;
      opacity: 1;
   }
}

body{
   &.astroid-offcanvas-opened{
      .astroid-content{
         &:after{
            width: 100%;
            height: 100%;
            opacity: 1;
            -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
         }
      }
      .astroid-offcanvas{
         &:after{
            width: 0;
            height: 0;
            opacity: 0;
            -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
            transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
         }
      }
      .astroid-offcanvas-open{
         overflow-x: hidden;
      }
   }
}

3. In terms of the easing menu. I think in the user backend it would just be a case of two dropdown menus offering the same options you have now. One with the title "Menu opening animation" the other with "menu closing animation".

As for the code implementation, I don't currently know as I haven't looked into it. It was just an observation. If I do make an adjustment in the future I will post the code here.
The administrator has disabled public write access.

Mega Menu Colour Problem 2 months 1 week ago #11558

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 2096
  • Thank you received: 314
  • Karma: 61
Thanks for the code sample, it's very helpful.

I'll post back here once/if we have the menu animations worked out in the future.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Mega Menu Colour Problem 2 months 5 days ago #11913

  • cberauer
  • cberauer's Avatar
  • Offline
  • New Member
  • Posts: 2
  • Karma: 0
I just downloaded the latest dev version from Github. Noted one big issues though: The drop down menus don't disappear once they are shown. Only a page refresh helps.
Otherwise I really like you framework. I'm hoping it get's a lot of traction. Thank you.
Attachments:
The administrator has disabled public write access.

Mega Menu Colour Problem 2 months 5 days ago #11914

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 2096
  • Thank you received: 314
  • Karma: 61
Thanks for the post. We are already working on a fix there among a few other things. Once done, it'll all be done. We are hoping to have a release by end of this week or early next week with everything fixed.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.
Time to create page: 0.494 seconds