Trending stories dropdown

haonas

Hello,
Demo of header 13 in blockk has a module on the navbar right side named Trending stories.
I try to make it work on my side and it doesn't.
I add this <jdoc:include type="modules" name="menu-right" title="Trending Menu" style="JAxhtml"/> and i also have a module item published on the position menu-right and it's not showing as it should at all the module content is already loaded and floods the screen.
Can you share details on how is this done?

saguaros

haonas Hello

The menu-right section is added by default in header-13 block. Here is the code of this block, you can take a look as reference:

<!-- HEADER BLOCK -->
<header id="t4-header-wrap" class="t4-header header-layout-13">
<div class="t4-header-inner header-theme-dark">
<div class="container">
<div class="row no-gutters d-flex align-items-center flex-nowrap wrap-header">
<div class="col-5 col-lg-2 d-flex justify-content-lg-center align-items-center">
<div class="t4-logo-header d-flex align-items-center">
<jdoc:include type="element" name="offcanvas-toggle" />
<jdoc:include type="element" name="logo" />
</div>
</div>

<div class="col-7 col-lg-10 top-right">
<div class="top-head d-flex align-items-center">
<div class="t4-header-left d-none d-lg-flex">
<jdoc:include type="modules" name="lead-info" />
</div>

<div class="t4-header-right d-flex justify-content-end align-items-center">
<jdoc:include type="element" name="theme-toggle" />

<jdoc:include type="element" name="megamenu-toggle" />

<div class="head-search">
    <jdoc:include type="modules" name="head-search" />
</div>
</div>
</div>

<div class="t4-megamenu-wrap justify-content-between align-items-center d-flex">
<div class="t4-navbar">
<jdoc:include type="element" name="megamenu" />
</div>
<div class="menu-right d-none d-xl-flex">
<jdoc:include type="modules" name="menu-right" title="Trending Menu" style="JAxhtml"/>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- // HEADER BLOCK -->

Then create a new module type of ** Articles - Latest** and assign to menu-right position.

If it still doesn't work, you can share the super admin account of your site so I can take a look.

haonas

I did everything as you said and for some reason i cannot make it work.
I filled my admin credentials so you can take a look.
Thank you

saguaros

haonas Which page you want to show this menu-right section?

I checked the homepage of your site but it's using default header, not the header-13 as you mentioned.

haonas

saguaros
I tried all scenarios such as using header 13 on a specific page and also i implemented this code on the default header
<jdoc:include type="modules" name="menu-right" title="Trending Menu" style="JAxhtml"/>
And nothing worked for me.
You can apply it on the contact page for testing purpose.

Regards

haonas

@saguaros i found the problem.
I was missing the mod_articles_latest override.
I noticed that this method is from ja_justitia_tpl
Is there any tutorial on how to make the same with other modules and not only with content latest articles?
For example i would like to load an NSP module on the same position.

Regards

saguaros

haonas Hi

You can try to load the module position and module title as the default Trending Menu there.

haonas

saguaros
It's not working because the for mod_articles_latest there is an override to make it work on the navbar for the trending stories.
But thank you

saguaros

haonas Hi

You're right, by default, this layout supports custom style for Articles - Latest module in that menu-right position only. You will need to customize the style if using other module there.

Here is declaration in template for this module:

.header-layout-10 .menu-right ul.list-item, .header-layout-13 .menu-right ul.list-item {
    background: var(--light-reverse);
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
    right: 0;
    opacity: 0;
    padding: 1.0667rem;
    position: absolute;
    top: 32px;
    visibility: hidden;
    width: 400px;
    z-index: 100;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.header-layout-10 .menu-right:hover ul.list-item, .header-layout-13 .menu-right:hover ul.list-item {
    -webkit-transform: perspective(600px) rotateX(0deg);
    transform: perspective(600px) rotateX(0deg);
    visibility: visible;
    opacity: 1;
}

.latestnews.list-item .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

....