Recent
Categories
View Replies (6)

Side column on mobile before component J51_Layla

  1. Issue
0
Votes
Undo
  1. Mol4
    Mol4
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Monday, 13 June 2022
  5.  Subscribe via email
Hello Ciaran,

On my clients test website I've managed to get the sidebar B before the component on mobile with the following code (found in the forum):
@media only screen and (max-width: 1010px) {
#main {display: flex; flex-direction: column; }
.sidecol_b, .main-content { order: 0; width: 100%; }
}
What I tried to achieve is to get the Module Title and the hamburger menu in one line.
Unfortunately not with any success.
Is there a way to achieve this?
Thanks!

Greetings,
Ton
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ton

As the module header and content are in two separate containing divs, this unfortunately is not really possible. Have you tried disabling the template header and instead, placing it within your module content (presuming this is a custom module)?

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

Oke, that is clear :-)
It is a Menu module but I'l try this with a custom module where I place the Menu Module in or so.
Thanks!

Greetings, Ton
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Mol4
Mol4
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I think I've found a solution for this.
I've put in the next class in the custom css of the template:
.icon-menu::before {
content: "submenu \f0c9";
color: #7A6FAC;
}
Only thing is after clicking the background remains purple so you don't see the text anymore.
Do you maybe know how to solve this?
Thanks!

Greetings, Ton
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ton

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

button:hover ::before {

    color: white;

}


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

Thanks but unfortunately this doesn't work (tested on iPhone 12).

Greetings,
Ton
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ton

Could you try replacing this CSS with the following...

button:hover ::before,

button:focus ::before,

button:active ::before {

    color: white;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • 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.