Extend the main menu across the line

carlucci

https://blockk.dietapino.com/

Extend the main menu across the line and minimize the source of the main menu.

Is there a possibility to have a top menu like in telinev?

saguaros

Do you mean a menu on top of page like JA Teline V template? as I can see you already had the menu show above the main menu now:

If you want to have a menu on top of page, you will need to add a new block above the current header block on your site + load the position there + assign menu module to that position and customize the style for it.

Regards

carlucci

saguaros
Good morning,
Thank you very much Saguaros. How is this done? I do not know what I have to do nor do I know where to modify. I have made the top menu but I cannot add sub menu item's.

There is another unanswered problem :
Extend the main menu across the line and minimize the source of the main menu.

carlucci

saguaros

Hi!

If you want to have a menu on top of page, you will need to add a new block above the current header block on your site + load the position there + assign menu module to that position and customize the style for it.

Could you add the new block for the top menu?
I've tried and can't.
Please, I would be very grateful.

saguaros

carlucci I have made the top menu but I cannot add sub menu item's.

We use default Menu module of Joomla, it doesn't support dropdown like the megamenu in template.

carlucci Extend the main menu across the line and minimize the source of the main menu.

I'm not entirely sure of how it should be, could you illustrate modification you expect via screenshot?

carlucci

saguaros
I need more menu item in one line.
I do not know how to explain it to you.
Now I have 7 items and I want to add several more items but there is no space, therefore the menu must be lengthened to be able to generate more items.
I have generated 5 items of which 3 overflow to the second line.
I need it to be a single line.
If you can't tell me and we'll close the thread.
We cannot be forever with this same thread asking questions.

saguaros

Hi carlucci

To show all items in a single line, you can reduce the spacing between them:

@media (min-width: 1200px) {
.t4-megamenu > .navbar-nav > li {
    margin-left: 3px !important;
    margin-right: 3px !important;
}
}

and change to your desired value.

However, I think you should consider to group items in the main menu as show all items with this way will not look nice.

Regards

carlucci

saguaros
Thank you very much Saguaros.
I have modified your code:

@media (min-width: 1200px) {
.t4-megamenu > .navbar-nav > li {
    margin-right: 5px !important;
}
}

Look at my screenshot. If the marked left part can be eliminated, everything is shifted to the left. Can be done?

saguaros

Hi carlucci

That logo part has 3 grids and I changed col-3 class to col-auto px-3 in the header:

carlucci

saguaros
When there is an update of the template, does it need a modification of the php again?
Please close the thread

saguaros

carlucci You can clone this header block: /templates/ja_blockk/html/layouts/t4/block/header-13.html

to have a new one and rename it to any name like: header-14.html

Then in Layout Settings (as my screenshot above), select the new header block and make changes there, it will not be affected when updating new version of template.

saguaros

carlucci

I just added a new section above the mainnav, you can configure to show block/element/module position / etc... as you wish there:

carlucci

saguaros
Please see what I've done. I'm sorry, I don't know how to continue. The top-menu is a duplicate of the main-menu.
If you don't help me I have to quit. I haven't the slightest idea I have to do. I want up a menu like in telinev.

saguaros

carlucci But which menu you want to show on top? and you want to show menu module, right?

carlucci

Saguaros: That logo part has 3 grids and I changed col-3 class to col-auto px-3 in the header:

I have installed the new version of the template. I want to restore what you did. But it does not look good.

saguaros

carlucci

You can simply remove the class 'col-auto px-3' to 'col-3'