Floating sticky, shrinking menu

gribblej

I like the new business template. https://www.joomlart.com/demo/ja-morgan But unfortunately has the same old old-school menu positioning which our customers look upon as obsolete/clunky. I finally did branch out into WordPress because this, and so many other things, are so code-intensive in the JA World. But, I certainly can write code and have done many a hack. Here is a pretty good example of what I would like to achieve: https://vertzmarketing.com/ In my inspector I get the general drift of what's happening under the skin.
How do I implement it with "Morgan"
Thanks to anyone who can help.
-Jim G.

Ninja

gribblej
Hi
I am getting 502 error on the site links you shared : http://prntscr.com/qs2v8u
Please check and fix, so i can check your request.

Regards

gribblej

https://vertzmarketing.com/ It is working without a problem for me.

gribblej

Anybody home?

Manit

Hi gribblej
Thank you for your suggestions. We are more than happy to improve our products.
I checked your website but it gives me 502 issue. If you can give me screenshot, it would work also.

Regards.

gribblej

I've shown you one demo site: Vertz Marketing. I don't get a 502 error. Please clear your cache? Anyway, I cannot believe that the coding geniuses at Joomlart haven't heard of a sticky shrinking menu. It can be seen on millions of WordPress websites. You yourselves use a simplified variation in which the menu position is sticky but the logo doesn't shrink. I know how to do that too, but I'd like to go one trick further. Having read up on this I've found that generic PHP code solutions are abundant. But from experience I know that you can't always simply drop them into T3 framework. Your customers have been asking for this for years. I think a lot of them are now ex-customers who dropped Joomla for WordPress. However I prefer Joomla and would like it to be able to do all the tricks which are so easy in WordPress. I also have a number of a long-established legacy Joomla sites which I want to keep going, and I want to modernize.
Thank you,
-Jim Gribble

Manit

I checked the referenced website: https://vertzmarketing.com/ and I can see the menu you mentioned. It looks good, I will check with our development team and we will make a header variation for floating sticky, shrinking menu.

Manit

Hi again,
Here is the solution for your request, we have implemented for JA Morgan template and release it soon. We will also make documentation to implement the same menu style for other templates soon.
1. Add new files:
Add folder style-5 to the folder: templates/ja_morgan/less/themes/
Add file header_style-5.php to the folder: templates/ja_morgan/tpls/blocks/header/
2. Add style:
Open file less/style.less and add follow style:
You can also download the file in the attachment and replace if you haven't updated the file from your side.

.t3-header {
  background: @navbar-default-bg;

  // Mobile view
  @media (max-width: @screen-sm-max){
    position: relative;
  }
  
  .container-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .header-inner {
    align-items: center;
    display: flex;
  }

  &.header-style-5 {
    // Desktopview
    @media (min-width: @grid-float-breakpoint) {
      .container-inner {
        flex-direction: column;
      }

      .header-inner {
        width: 100%;
        justify-content: space-between;
      }

      .headleft {
        display: flex;
        align-items: center;

        .logo-mainnav {
          transform: scale(0.5);
          -webkit-transform: scale(0.5);
          width: 0;
          opacity: 0;
          .transition(all 500ms);
        }
      }

      // Logo
      .logo {
        border-bottom: 1px solid @t3-border-color;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: @grid-gutter-width 0;
        min-height: 140px;
        width: 100%;

        a {
          font-size: @font-size-h2;
        }

        img {
          max-height: 80px;
        }
      }

      // Mainnav
      .navbar-default .navbar-nav > li > a,
      .navbar-default .navbar-nav > li > span {
        margin-left: 0;
        margin-right: @grid-gutter-width;
      }
    }

    // Desktopview
    @media (max-width: @grid-float-breakpoint) {
      .logo-mainnav {
        display: none;
      }
    }
  }
}

.t3-wrapper.affix {
  position: relative;
  
  // Desktopview
  @media (min-width: @grid-float-breakpoint) {
    padding-top: @navbar-height + 140px;

    #t3-header {
      background: @white;
      border-bottom: 1px solid @t3-border-color;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;

      .logo {
        display: none;
      }

      .headleft {
        .logo-mainnav {
          transform: scale(1);
          -webkit-transform: scale(1);
          margin-right: @grid-gutter-width;
          width: auto;
          opacity: 1;
        }

        .logo-image img {
          max-height: @navbar-height - (@grid-gutter-width * 2);
        }
      }
    } 
  }
}

3. Add following JS to the templates/ja_morgan/js/scripts.js file:

// Affix for navbar
  $topbarHeight = $('.t3-topbar').outerHeight(true) + $('.t3-header .logo').outerHeight(true);

  if($('.header-style-5').length) {
    $('.t3-wrapper').affix({
      offset: {
        top: $topbarHeight
      }
    })
  }

Select style-5 for the theme setting of the active JA Morgan template style
Compile LESS to CSS.

Let me know if you have any question.
Regards.

josefk

Manit
ok - i ve done all that. no sticky, floating menu.

there is also no /js/scripts.js file, only a script.js file - is this the same, or a typo error in your instructions??
also - should i just copy the header.php file and rename it to header_style-5.php ??
where are the attachments you ve mentioned?? cant find them.

It woul be great if you guys could be more detailed and specific when describing these hotfixes to solve a problem.
also - when does the hotfix you mentioned will be released??

and not to forget - all this didnt help at all. My menu is still static, not sticky, not floating.

Any suggestions?
And no, there is no link to a website you can take a look. it is all local. but i have done as you suggested.

joe

forty

Manit Hi where are the attachments? I need this fix too.
Thanks!

Ninja

forty
Hi
Please find the attached files below

header.zip

6kB

themes.zip

5kB

forty

Thanks!!