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

nrbt

Hi there!
In regards to the header menu - I would like the drop down menu to occupy the full width of the screen, and the menu items to align to the left and align with the logo. Please refer to the screenshot below.

dominic

Hi nrbt,
If you are using the megamenu, you can change the submenu width here:

Or try the following CSS code:

@media (min-width: 991.99px) {
.t4-megamenu.animate.slide .dropdown .dropdown-menu {
     width: ....;
}
}

nrbt

Thank Dominic.
I already tried the first option. I also tried the second one (CSS code) but it doesn't do much for me.

Maybe my explanation wasn't very clear, and that is totally my fault. I try one more time. 🙂🙂

What I was looking for, was that when you mouse over the header menu, the drop down menu drops. What I would like it to do, I want the white space to occupy the full width of the page, but the menu items to still align to the left of the inner container.

For example, if I mouse over the Who We Are item (first menu item), the drop down will appear and the white space will cover the whole width, but the menu items will align with the logo.

And when I hover over the next menu item on the header, its child items will also align with the logo.

I hope I did a better job this time, explaining my idea.

Many thanks in advance.

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