A link to the page will be necessary here...

(Any other explanations about the structure of the site)

Hello

Unfortunately, the site is currently offline, as I want it to look perfect (im making other changes) before making it live again.

I will forward my message - along with access information - in a support message to Ciaran.

Thanks

Jonathan

Hi Jonathan

May I suggest sending the URL to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran

Thank you Jonathan

The reason for the whitespace is due to some of your menu dropdowns are breaking out beyond your viewport In particular the dropdown to your History & Records dropdown. To reduce the width of this dropdown, could you try replacing the columns-4 class with columns-3.

Ciaran

Hello Ciaran

Thanks for this - which partially fixes the issue. One menu is four columns wide, but as its torwards the right hand side of the main menu, it still goes off to the right (left from the menu option).

This i because the dropdown menu is right-aligned under the menu. Can it be left-aligned so that it doesn't go off page ?

Thanks

Jonathan

Hi

I am looking for this approach (left-alignment) on sophia, natalie and layla. Is it possible?

Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

Replace 777 with the parent menu item ID of your choice (right column in menu manager)

.hornav .item-777 > ul {

    left: auto !important;

    right: 0;

}

Ciaran

Hello Ciaran

Thank you so much for this code. It has made such a difference.

To make the site perfect, I am looking to set the width of the sub-menus. Each sub-menu is either 2 or 3 columns wide. I saw code such as the code below, but this hasn't had the desired impact

.hornav .item-511 ul {
min-width: 270px;
}

A screenshot of the issue is attached:



Kind Regards

Jonathan

Hi Jonathan

Your CSS will only apply to a dropdown whose parent menu item ID is 511. Is this correct and intended? Is the CSS getting applied but not the desired result or simply not getting applied at all?

Ciaran

Hi Ciaran

Yes, the above was applied, but didn't work.

Since then, i've implemented the following CSS:

.hornav .columns-2 + ul {
width: 600px;
}

.hornav .columns-3 + ul {
width: 800px;
}

.hornav .columns-4 + ul {
width: 900px;
}

.hornav .item-511 > ul {
left: auto !important;
right: 0;
}

.hornav .item-568 > ul {
left: auto !important;
right: 0;
}

.hornav .item-2866 > ul {
left: auto !important;
right: 0;
}

.hornav .item-3361 > ul {
left: auto !important;
right: 0;
}

However:

1) is it possible to set a minimum sub-menu width at parent item level?
2) is it possible to (as per image showing Election Results sub-menu) to have its sub-menu on the left?
3) the 'heritage' menu, despite being set-up as columns-2 or columns-3 is not displaying correctly. Can you look into it?

Jonathan

Hi Jonathan

Thank you for the update.

1. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

Replace 777 with your parent item ID.

.hornav .item-777 > ul {

    min-width: 400px;

}

2. / 3. On these items, get back to us once your site is available online and we will look into a possible solution.

Ciaran

I notice requested details have already been sent.

1. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.hornav .item-590:hover ul, .hornav .item-590 ul {

    left: -230px !important;

    width: 230px;

}

2. To amend try also adding the following (edit to taste)...

.hornav .columns-3 + ul {

    max-height: 440px;

}

Ciaran