Header menu drop down to occupy the full width of the screen.

dominic

Hi nrbt,
I think you can use this CSS code, this code works only with the menu item enabled by the megamenu:

.t4-megamenu.animate.slide .dropdown.show.animating > .mega-dropdown-menu::after {
  position: absolute;
  background: #fff;
  width: 4000px;
  height: 100%;
  left: -100%;
  content: "";
  top: 0;
  z-index: -1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

Hope this helps!

nrbt

Hi Dominic,

I tried the code you provided, but it didn't do anything. Maybe I need to change something in the template style?

Anyhow, I'll keep looking and changing some codes on the backend as well. If I get it, I'll post it here.

But only if you don't beat me to it. Haha. Which, let's be honest, you probably will.

Have a good one!

Thanks.

dominic

Hi nrbt,
I have tested the CSS code on localhost without a change in the template style, you can inspect the site and find the class of the dropdown menu, and try with the CSS code that I provided.

nrbt

Hi Dominic,

I don't know why it didn't work the first time. It is now working.

The only issue I have now is that the child menus are not aligning with the logo, they are aligning with their parent item.

How can I move the menu items (childs) to start aligning with the logo?

Thanks.

saguaros

Could you put your site online so we can have a closer look and check for you?

nrbt

saguaros

Sorry Saguaros, unfortunately, I can't put it online yet, as I don't have the approval to do so right now. It's a company website and it is still on development phase.

I wish I could put it online so that you could assist more on the issue.

However, I'm trying to find the right code to move the "dropdown-menu" class to be the same width as the "container".

saguaros

nrbt If possible, you can take a backup of your site with Akeeba backup component and share me the backup file so I will check in my local environment.

xerse

Sorry I add a question to this post: How can configure the header menu (not megamenu) to occupy the full width ?

saguaros

You can access the Row/Section configuration of the header block on your site and change the Container to None

https://www.joomlart.com/documentation/t4-framework/layout-builder#layout-grid_jadoc

xerse

Just because we are talking about it, I planned to feedback as a bug: In latest quickstart for joomla5 labels for fields in row configuration are not visible (please find the attached image).

Anyway I already have "None"

saguaros

May I know which label are you referring to?

xerse

saguaros

Each field have no label to explain how to be used.
In the link you provided each field have labels ("section title" , "container", "padding" "custom CSS class", etc).

Going back to the original question: I already have "none" as container, but the menù does not extend to the full width of the screen (i.e. slideshow image is at full width)

saguaros

xerse Going back to the original question: I already have "none" as container, but the menù does not extend to the full width of the screen (i.e. slideshow image is at full width)

You can share the login info of your site so I can check.

xerse

This message is visible to Moderators only

hidden content

saguaros

xerse I can log into your site and see that you don't set the container for the Header section but the block 'header-2' itself has the container in code:

<!-- HEADER BLOCK -->
<header class="header-block header-block-2">
  <div class="container-xxl">
    <div class="header-wrap d-flex align-items-center justify-content-between collapse-static">
      <jdoc:include type="element" name="logo" data-home="index.php" />

      <div class="t4-navbar mx-auto collapse-static">
        <jdoc:include type="element" name="megamenu" />
      </div>

      <div class="t4-header-r d-flex align-items-center">
        <jdoc:include type="modules" name="header-r" style="raw" />
        <jdoc:include type="element" name="megamenu-toggle" />
        <jdoc:include type="element" name="offcanvas-toggle" />
      </div>
    </div>
  </div>
</header>
<!-- // HEADER BLOCK -->

I just removed this div: <div class="container-xxl">

Kindly check.

xerse

saguaros Dear Saguaros, I've no idea from where that code is taken. :-D

I mean that I have not made any changes to the template code.
I do everything to avoid it and try to work only on "custom CSS"

The "header block" is something I've never changed.

I have a purity IV quickstart on a different domain for comparison purpose.
I fouund the code you refers editing the style for header-2.
The div with class "container-XXL" exist into the quickstart too

Please could you explain if it is an error in the template that will be fixed or not?

Thanks

saguaros

xerse Hi

I want to clarify that this isn’t a bug with the template. The class was intentionally added to the header block.

With T4-based templates, you can easily adjust the container's width by setting it to Fixed, Fluid, or None. In this case, the header block has that class, which is why it’s not displaying at full width—this is by design, not a bug.

You can clone this block + remove that class as you wish so it will not be affected when you update the new version of template.

Regards

xerse

saguaros
Nice to know that it is not a bug.

Jut to left a clarification comment: If I undestood correctly, a change into a row that exist on the template could be overwritten when the template will be updated.
To avoid this, I have to clone the row as the cloned one will be a customization that will not being affected by template updates.

Correct?

Just to complete, how to do the same with the topbar row? It does not use the container-xxl class and applying the containter as None have no effects

saguaros

xerse

You can copy the content of the current block + create a new block and customize it.

When you update new version of template, only default block (that comes with template) will be overwritten so your custom block will be safe.

In case that you customize layout, it's better to clone layout as well: https://www.joomlart.com/documentation/t4-framework/layout-builder#layout-selection_jadoc

Regards