Recent
Categories
View Replies (11)

Skylar_J4.V.1.1.12 - Template Update Destroyed My Mobile Menu

  1. Bug
0
Votes
Undo
  1. dautrich
    dautrich
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Tuesday, 22 August 2023
  5.  Subscribe via email
Hi Ciaran,

unfortunately, the update of my template Skylar_J4 to version 1.1.12 completely destroyed my mobile menu.

As described in your changelog, you successfully corrected a small error in the mobile menu (menu item text not clickable if submenu exists).
Skylar_J4_V1.1.12_Changelog.jpg

I must admit that I heavily changed the CSS for the mobile menu via my custom.css. I described the motivation behind my changes in the forum post #46325 titled "SKYLAR_J4: Some Custom CSS for the public".

To show the effects of your template update, I compare two sites that are identical apart from the template version:


The first difference can be seen in the hornav desktop menu at a menu item with a submenu:

  • The production site shows menu item "Jahre" in bold.
    • Skylar_J4_V1.1.8_Hornav.jpg

  • The staging site shows the same menu item as standard text.
    • Skylar_J4_V1.1.12_Hornav.jpg


In mobile view, the differences are far more obvious: With template version 1.1.8 the menus look clean, while they are completely destroyed in V1.1.12.

Skylar_J4_V1.1.8_Mobile_Menu_Main.jpg

Skylar_J4_V1.1.12_Mobile_Menu_Main.jpg

Skylar_J4_V1.1.8_Mobile_Menu_Sub.jpg

Skylar_J4_V1.1.12_Mobile_Menu_Sub.jpg


What do you think? Can you correct the errors in V1.1.12 easily? Or would it be better to revert the changes to the mobile menu, until you find a better solution for this issue; the other changes in V1.1.12 are most welcome.

I suppose that you need super user privileges for https://www.staging.nickdautrich.de. Therefore, I have re-activated your account. I temporarily removed the .htaccess protection from the Administrator directory.
For reference purposes, I've also activated the account on my live site https://www.nickdautrich.de in the "Registered" user group, so that you can log into the frontend.

I will send the password in an email.

Best regards

Rolf
Attachments (7)
Skylar_J4_V1.1.12_Changelog.jpg Skylar_J4_V1.1.12_Changelog.jpg
Skylar_J4_V1.1.8_Hornav.jpg Skylar_J4_V1.1.8_Hornav.jpg
Skylar_J4_V1.1.12_Hornav.jpg Skylar_J4_V1.1.12_Hornav.jpg
Skylar_J4_V1.1.12_Mobile_Menu_Main.jpg Skylar_J4_V1.1.12_Mobile_Menu_Main.jpg
Skylar_J4_V1.1.12_Mobile_Menu_Sub.jpg Skylar_J4_V1.1.12_Mobile_Menu_Sub.jpg
Skylar_J4_V1.1.8_Mobile_Menu_Main.jpg Skylar_J4_V1.1.8_Mobile_Menu_Main.jpg
Skylar_J4_V1.1.8_Mobile_Menu_Sub.jpg Skylar_J4_V1.1.8_Mobile_Menu_Sub.jpg
References
  1. https://www.staging.nickdautrich.de/
  2. https://www.nickdautrich.de/
Responses (11)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Does removing your custom CSS related to the mobile menu resolve the issue? Two aspects of the latest update that may affect your custom CSS are..

1. Non links (eg. headers, separators) are now displayed as spans rather than anchors.
2. The mobile chevrons are used to indicate that a parent item has children

So for example you may wish to replace... 

.item-101 a, .item-109 a, .item-108 a, .item-110 a, .item-118 a, .item-119 a {

    font-weight: bold !important;

}


With..

.hornav > ul > li > a, 

.hornav > ul > li > span {

    font-weight: bold;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Following your advice, I have removed most of my custom CSS regarding mobile menu. What remains, is relatively trivial:


/*  Mobile Menu  */

.mm-spn.mm-spn--navbar::after {

	opacity: 1;

    font-weight: bold;

}

.mm-spn ul.mm-spn--open {

	font-weight: bold;

    font-size: 18px;

}

.mm-spn li::before {

	opacity: 1;

}

.mm-spn.mm-spn--navbar::before {

	color: white;

    opacity: 1;

}



/* ****************************************************************** */

/*      Eigene Klassen                                                */   

/* ****************************************************************** */

.menu_jahre {

    font-weight: bold;

    text-align: center;

}


There remains one problem with the desktop (hornav) menu, which I didn't mention in my previous post: I try to add a Fontawesome symbol to the menu items on level 2, using the Link Type option in the menu item definition:

Skylar_J4_V1.1.12_Hornav_Submenu_Item.jpg

In Version 1.1.8, the menu displays with the FA symbols:

Skylar_J4_V1.1.8_Menulevel_2.jpg

In Version 1.1.12, the FA symbols are not rendered:

Skylar_J4_V1.1.12_Menulevel_2.jpg

Do you have a solution?

Regards
Rolf
Attachments (3)
Skylar_J4_V1.1.12_Hornav_Submenu_Item.jpg Skylar_J4_V1.1.12_Hornav_Submenu_Item.jpg
Skylar_J4_V1.1.8_Menulevel_2.jpg Skylar_J4_V1.1.8_Menulevel_2.jpg
Skylar_J4_V1.1.12_Menulevel_2.jpg Skylar_J4_V1.1.12_Menulevel_2.jpg
References
  1. https://www.nickdautrich.de
  2. https://www.staging.nickdautrich.de
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Rolf.

This is indeed an issue. I have just created a new template update to resolve this issue (v1.1.13).

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

I've tested J51_Skylar_V1.1.13 today. This version solves the issue regarding the missing FA items in the hornav menu:

Skylar_J4_V1.1.13_Menulevel_2.jpg

In addition, the first level of the mobile menu looks fine:

Skylar_J4_V1.1.13_MobileMen_Level_1.jpg

But I'm still not happy with your patch, because the second level of the mobile menu looks like this:

Skylar_J4_V1.1.13_MobileMen_Level_2.jpg

Obviously, the FA symbol and the menu item text are displayed on two different lines instead of one.

I was able to correct the issue using this CSS:



.mm-spn a {

    display: flex !important;

    align-items: center;

}


After applying that, I reached:

Skylar_J4_V1.1.13_MobileMen_Level_2_patched.jpg

In principle, this is fine. But because I do have quite a number of menu items on this level, I wanted to reduce the vertical padding. I achieved this by applying:



.item-111 a, .item-112 a, .item-113 a, .item-114 a, .item-115 a, .item-120 a, .item-121 a, .item-122 a, .item-123 a, .item-124 a, .item-125 a, .item-126 a, .item-127 a {

	padding-top: 0;

	padding-bottom: 0;

}


I don't insist on this to be an elegant solution, so you might have a better CSS to achieve my final state:

Skylar_J4_V1.1.13_MobileMen_Level_2_patched_twice.jpg

Regards

Rolf
Attachments (5)
Skylar_J4_V1.1.13_Menulevel_2.jpg Skylar_J4_V1.1.13_Menulevel_2.jpg
Skylar_J4_V1.1.13_MobileMen_Level_1.jpg Skylar_J4_V1.1.13_MobileMen_Level_1.jpg
Skylar_J4_V1.1.13_MobileMen_Level_2.jpg Skylar_J4_V1.1.13_MobileMen_Level_2.jpg
Skylar_J4_V1.1.13_MobileMen_Level_2_patched.jpg Skylar_J4_V1.1.13_MobileMen_Level_2_patched.jpg
Skylar_J4_V1.1.13_MobileMen_Level_2_patched_twice.jpg Skylar_J4_V1.1.13_MobileMen_Level_2_patched_twice.jpg
References
  1. https://www.staging.nickdautrich.de/
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Thank you for sharing your solution.

This is just a suggestion but you could replace ....

.item-111 a, .item-112 a, .item-113 a, .item-114 a, .item-115 a, .item-120 a, .item-121 a, .item-122 a, .item-123 a, .item-124 a, .item-125 a, .item-126 a, .item-127 a {

    padding-top: 0;

    padding-bottom: 0;

}


With..

.mod-menu__sub > li > a {

    padding-block: 0;

}


The only advantage is that you won't have to update your CSS with every new item added.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

A typical question: Will you provide a new version of the template with that code:


.mm-spn a {

    display: flex !important;

    align-items: center;

}


And thanks for your CSS regarding the list elements, which I tested successfully. I will use this on my other sites with similar menus.
For this specific site, I could have stayed with the item classes for a sad reason: This site is (apart from being a test field for more important sites) a homage to our dog Nick. He perished in 2020, so there will be no additional years (~ menu items) in the future.

Thx and regards
Rolf
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Sorry about Nick :( The site is certainly a very nice recognition of his life.

I have just created a new release to the Skylar template including a fix for the mobile icons.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Today I tested Skylar_J4 version 1.1.14. I'm still not happy with it!

IMHO, this patch is necessary for mobile menus with FA icons:


.mm-spn a {

    display: flex !important;

    align-items: center;

}


However, it is not included in the V1.1.14 template, as the screenshot shows:

Skylar_J4_V1.1.14_MobileMenu_CSS.jpg

The display still is set to block, not flex.

Can you have another look, pls? If necessary, I can provide superuser access to the site.

Regards

Rolf
Attachments (1)
Skylar_J4_V1.1.14_MobileMenu_CSS.jpg Skylar_J4_V1.1.14_MobileMenu_CSS.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Ah my apologies.. it looks like the changes did not get included in the template build. Could I ask you to re-download the update and install.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

I've re-downloaded the template, and I can confirm that the patch for the mobile menu is included in the new download version. So I'm happy now.

Regards

Rolf


PS: Shit happens! ;)
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Nice!Thank you for the update :)

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


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

Site Links

Recommended

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.