Banner Menu Position Not Possible?

[LTCreations01]

I've been chasing my tail on this one and don't know if it's just me, a problem with the default menu CSS, or perhaps some logical explanation about why a menu cannot be positioned in a module set to "Banner" position and have the horizontal orientation.

Let me be clear.
I have not been able to have the menu aligned horizontally when using a custom module assigned to the "Banner" position. Default orientation if not in the header is "vertical".

I can get the top level (level-1 or "parent") menu items aligned horizontally using CSS.
But, no matter what I do, the sub-menu icon will NOT ride on the right side of the parent menu item. It's forced to appear "under" the parent item. There is a ton of space between the parent items, so padding / margin is not the issue.

I've tried a lot of variations in CSS to get the arrow icon re-positioned, but no luck.
The only part of the CSS that I can see is different from my banner position menu and the top header menu is the ".container-header .mod-menu {-webkit-box-orient:horizontal;}" for the top bar but that same CSS when I look at the banner positioned menu is "vertical".
Attempting an override in CSS didn't work.

I can prove it's not something in the way because I installed the free version of djmegamenu and assigned it to the banner position for the same menu that wouldn't work for me. The djmegamenu worked perfectly when assigned to the banner position (I just need to get the paid version in order to make the menu "look" how the client wants.

For those who say, "Why fight? Just keep the DJ Menu.", I agree, except that I really do my best to only install what's absolutely necessary and everything else is positioned or designed using CSS.
I'm my effort to keep that theory, which has a lot to do with site performance, I would like to find a resolve for the menu.

Is there a Joomla guru out there who can assist in finding a resolve for this? And yes, I can provide a link to where I'm working, but I prefer to do that only through dm.

[AMurray]

First up a link to your site showing what you want to do would help......

[LTCreations01]

I don't really want to put the link in the forum, as I mentioned, but here - https://schoolfortheblonde.com/wantakey/

The "Key Machines & Accessories" is the first of 3 parent menu items. That is precisely what I expected the menu in Cassiopeia to do. But it won't.
So what you see is the dj-megamenu.
Again, the reason for the dm is because you're not going to see the difference between the Cassiopeia menu and the dj-megamenu without my working with you to show you each by publishing one then the other.

You could try it yourself with a default installation. Just assign a menu to a custom module and position it in the banner position. The default menu stacks the parents. CSS will allow you to make the parent display:inline; but the arrow for the sub-menu items will appear under the parents to the left - regardless of what you do.

[Pavel-ww]

You could try it yourself with a default installation. Just assign a menu to a custom module and position it in the banner position. The default menu stacks the parents. CSS will allow you to make the parent display:inline; but the arrow for the sub-menu items will appear under the parents to the left - regardless of what you do.

Hi. This is a forum of volunteers. I doubt that someone will try it. Just configure everything on your site so that the problem is visible and provide a link. And a screenshot of how you want it to be.

If you need confidentiality and personal communication, then hire someone on freelance. Or after the problem will be solved, you can contact the moderators to remove all links from your posts.

[LTCreations01]

Hi Pavel-ww -
I've switched the menu to the Joomla menu and unpublished the dj-megamenu that works perfectly.

Having both published at the same time throws off the entire page so it's impossible to see what I'm talking about.

The screen shot shows the dj-megamenu working as intended.

[LTCreations01]

I've switched back to the dj-megamenu so the site owners don't go crazy. Now you can see in both screen shots the working dj-megamenu and the not working Joomla menu.

[Pavel-ww]

I've switched back to the dj-megamenu so the site owners don't go crazy. Now you can see in both screen shots the working dj-megamenu and the not working Joomla menu.

Hi. Switch menu module to Dropdown layout

2.jpg

Add your own class to menu with space before.

3.jpg

And here is css

Code: Select all

.my-own-menu {
	display: flex;
	flex-direction: row;
}

4.jpg

5.jpg

Or If you will not successful, create a separate page that will not annoy the owner of the site, publish the menu module only on this page and provide a link

[LTCreations01]

Hi,

I moved the menu to the "About" page - https://schoolfortheblonde.com/wantakey/home/about

It works on desktop only with your version of CSS, not for mobile. I tried all "Layout" types available, but none of them work on mobile devices.
Yes, I could rewrite all the CSS for the menu to work. But that's not the point.

If I need to code everything to function well on all devices, there's little reason to go through all of that when I have the dj-megamenu working.
I would prefer to use what Joomla has by default. But in this case, I have no option but to use "something else".

It just seems odd (to me) that the default menu will only work as expected when it's somewhere in the header.

[Pavel-ww]

It just seems odd (to me) that the default menu will only work as expected when it's somewhere in the header.

Hi. Cassiopea is not framework-template. Therefore, many things in it can be used without additional coding only in places of purpose. I see nothing strange here. Normal behavior for any simple template, which has been throughout the duration of the existence of Joomla and has not changed.

If you need versatility, take a look at the framework-templates like Helix Ultimate, Gantry, T4 Framework and ect. All of them are free and have on board mega menu, offcanvas menu and many other things.


...So, I did not understand if you still need some kind of additional help with the menu?

There you do not need to rewrite all the CSS for menu, to make it work on mobile. A few lines are enough

Code: Select all

@media (max-width: 991px) {
    .my-own-menu {
        flex-direction: column;
    }
}

[Jaydot]

FWIW, it's perfectly possible to put a menu module outside of the header. The only thing you lose is the possibility to make the menu sticky.
I made a site with the menu in top-b position, using the layout "Cassiopeia collapsible dropdown".
You can see it here: ikvoelmijbeter.nl (I did add some CSS, as you can see with the Inspector).

[LTCreations01]

Pavel-ww, you stated that Helix is an option. When I used J4 for the first time, I attempted to use Helix and was told by Brian that Helix will not work with J4.
I'm guessing Helix is "now" working with J4?

Jaydot - I've made several J4 developments and used the default menu in the header and other various positions without any problem. Your example is not positioned in "banner", but top-b.
This thread is about the inability to have the default menu function properly in all devices when assigned to the "banner" position.

As I mentioned in my post here, I always try to use what J4 has by default. Isn't that the point of J4, to be able to use it "as" a template and framework?

It would have been simpler to just use dj-megamenu everywhere I need the menu. But, as I said, I try to use J4 without the necessity to install "something else".
So I can see now that I'll just use J4 as-is until I meet another issue that J4 is not capable of handling and install something. Not really how J4 was initially "advertised".

[sozzled]

Isn't that the point of J4, to be able to use it "as" a template and framework?

That's an interesting proposition, isn't it?

I could be wasting my time offering my opinions in this topic, however, the point of conjecture seems to be about the claim that "J! 4.x" (or Cassiopeia, more specifically ) is a template and a framework (or one or the other). If—and it's a mighty big if—it was the intention of the CMS developers to create a template and/or a framework for J!, where was this intention declared? Have you read anywhere that "J! 4.x" is a "template" and a "framework"? If you've read that somewhere, where did you read it or how did you come to that conclusion?

I'm not arguing for or against the proposition. It's unimportant to me whether one uses a template or a "framework" (or different templates and other extensions) to build a website according to one's needs or wants. We can talk in endless circles about what are the differences between a template and a framework (if there are such differences) but we will not progress further in such talks unless we clearly agree on the terms template and framework.

For the purposes of this discussion, the terms template and framework have not been defined. Define your understanding of these terms and then we may be able to help you address the issue with the "possibility" of a "banner position". Back to you.

[Pavel-ww]

Pavel-ww, you stated that Helix is an option. When I used J4 for the first time, I attempted to use Helix and was told by Brian that Helix will not work with J4.

Hi. Brian seems to be mistaken. The JoomShaper team prepared Helix for J4. Helix Ultimate 2 works good with J4