1. david@torrens.me.uk
  2. Commercial Templates
  3. Thursday, 27 August 2015
  4.  Subscribe via email
Site: http://www.whitchurchwaterway.uk/nhome
Template: Florence
Issue: Menu Item "Contact Us" only works from the page "Meeting Minutes".
Note this item does have sub menu items but they are not being displayed deliberately due to the settings in the menu module.
They are "extra pages" used for items such as the login screen.





It would be nicer to be able to switch off the Module that has been put the bottom of the Hornav menu area on the left when in responsive. (There is no option I can find for that) as they get untidily tagged onto the bottom of the responsive menu.
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
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. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
(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.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
(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.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
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.
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
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. :)
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks - that should fix the unwanted module issue but

also there is the question of the menu item only working from one place.
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 12
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok