Hi David

The menu and site looks greats. What you have done certainly makes your menu more intuitive to navigate.

Thank you for sharing your solution!

Ciarán

Thanks for that.
Based on your help my final custom CSS is as follows and the result can be seen at www.whitchurchwaterway.uk.
The main menu has separators created with the extra padding so now there is no need for the "Text Separator" menu items.
I think this menu style takes full advantage of the Florence template style for this relatively simple charity site.

/*-----------------------------------------------------------------------------------*/

/* Custom CSS */

/*-----------------------------------------------------------------------------------*/



.hornav ul {

    margin: 0;

}

.hornav ul ul {

    display: inline !important;

}

.hornav > ul > li.item-565 {

    padding-bottom: 20px;

}

.hornav > ul > li.item-542 {

    padding-bottom: 20px;

}

.hornav > ul > li.item-558 {

    padding-bottom: 20px;

}

.base-1 a:link {

 color: #8bc4e0;

}

.base-2 a:link {

 color: #8bc4e0;

}

.base-1 a:hover {

 color: #ffffff;

}

.base-2 a:hover {

 color: #ffffff;

}

.base-1 a:visited {

 color: #292e1e;

}

.base-2 a:visited {

 color: #292e1e;

}

I had no luck putting "hidden-phone" and/or "hidden -ablet" into the Module parameters (had no effect in "Module Class Suffix" so instead in the Custom HTML code I used this:

<div class="hidden-tablet hidden-phone">

<p><img style="margin-right: auto; margin-left: auto; display: block;" alt="wwtlogo inv150" src="/images/wwtlogo_inv150.png" /></p>

</div>

This works but mysteriously there is a small range of screen widths where the logo is still visible at the base of the responsive smaller screen menu.

So all sorted now.

1. I must be losing it... once again there is a syntax error with the ';; in the wrong place :silly: :blink: :blush: ... The CSS should the following...

@media only screen and (max-width: 767px) {

.item-544 {display:none !important;}

}

2. To set a specific color for your .base-1 links you can use the following custom CSS (edit to taste)...

.base-1 a {

    color: #cccccc;

}

3. Similar to issue 1, you can set bottom padding on specific menu items using custom CSS...

Eg.

.hornav > ul > li.item-547 {

    padding-bottom: 15px;

}

Ciarán

(1) I tried that code with !important and its made no difference. I entered the code for item 544 but actually its items 562, 563 and 564 I don't want on small screens.

(2) I have applied the light_text to custom HTML module in base1A (http://www.whitchurchwaterway.uk) and it makes not difference. I think Light Text is already applied to these modules .... and in any case its the link colours that are the problem not the text.

(3) I have tried to separate main menu items with Separator text but is there a better way? I note that the way you apply menu items with sub items as being inactive seems to be similar to the way Artisteer uses Separator text items. (item heading "Creating Vertical Menu with Separators" on http://www.artisteer.com/?p=help_joomla. . I must confess I think I had misunderstood the concept. I was hoping for just an extra gap between two menu items so that items either side would be seen as grouped. So a way to group items without having to set them as level 2. What method best suites your templates.

Hi David

1. My apologies. There is a slight syntax error in the CSS provided. Use the following instead...

@media only screen and (max-width: 767px) {

.item-544 {display:none; !important}

}

3. We try to keep the template parameters relatively simple so rather than adding fields to amend link colors for each set of modules we have instead created a utility class for this purpose (text-light). For further details on utility classes for this template may I suggest the following URL... http://demo.joomla51.com/0124/index.php/features/utility-classes

Ciarán

(1) I have entered the CSS to hide menu items on smaller screens - as you suggested BUT my only remaining significant problem is that that does not work.
Actually the items I want to hide are 562, 563 and 564 these are the dotted line items from the main menu.
Please any idea why that will not work; I have added this CSS to the template:

(I have to use these menu items with "-------" as the title as your templet does not act on "Text Separators" in the "usual way". I have sorted all the other issues by not having any sub menu items. The new format is now live. (As of 2/9/2015).)

(2) Comment:
I could not get your suggested code to hide the module at the bottom of hornav to work so instead I entered text direct into the Custom HTML as follows (which seems to work OK);
<div class="hidden-phone hidden-tablet">
<p><img style="margin-right: auto; margin-left: auto; display: block;" alt="wwtlogo120" src="images/wwtlogo120.png" /></p>
</div>

(3) Suggestion:
In your template styling you seem to have the same colour settings for Links and Links Hovered Over regardless of whether the background with be light or dark. This makes it hard to find good compromise colours to suite both light and dark backgrounds. Would it be better to be able to set these separately. Otherwise one needs to add code into individual modules to suite the different backgrounds.

As you suggested I have installed JQueryEasy.

With what seems to be the default set up of JQueryEasy it does make a difference.

When enabled the Mobile Menu reappears on the Meetings Minutes page for small screens.

However then the normal menu item "Contact Us" does not work from any page - but that may be as you have designed it.

I think that may be because Contact Us has sub menu items and I need to apply that code you gave me before to make menu items with sub items work. I will try that later.

Thank you David

2. This page appears to be loading jQuery however jQuery is already loaded by Joomla which is causing some conflicts. Have you an option within the extension to disable jQuery? If not you could use something like 'jQuery Easy' which ensures only one copy of jQuery is loaded across your site... http://extensions.joomla.org/extension/jquery-easy

3. Your contact page appears to be now displaying your mobile menu.

Ciarán

Hi David

To hide your 'contact us' menu item on small screens add the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 767px) {

.item-544 {display:none;

}

2./3. May I suggest sending temporary administration access 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.

Ciarán

I have implemented the suggestion above (adding the hidden commands to the module) and now that module at the bottom of Hornav does not appear on small screens.
However;
(1) For the menu item "Contact" the module placed in Hornav does appear on small screens when it should not.
(2) The Responsive menu button is not appearing on small screens for the Menu Item "Meeting Minutes"
(3) As stated above on large screens the menu Item "Contacts" only works from the "Meeting Minutes" page its OK on small screens (except of course that there is no menu button on the meeting minutes page.

Note, not the highest urgency - site will not be fully published until after middle of next week when I have had the committee members comments.

Thanks - that should fix the unwanted module issue but

also there is the question of the menu item only working from one place.

HI David

Presuming I understand you correctly may I suggest the following article which details how to hide a module on a mobile devices.. http://www.joomla51.com/tutorials/item/hide-a-joomla-module-on-mobile-devices

This can be applied to the module under your menu.

Ciarán