1. ip mann
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 14 October 2024
  5.  Subscribe via email
Hello!

I use Joomla 4 and the template J51 Natalie.

I have the following problem: I have placed a navigation menu in a module on the template position "side-col-A". On a mobile phone, the menu changes to an icon with three lines, which are unfortunately difficult to recognize in terms of color.

I would therefore like to change the colors of these lines. Where can I do this? Can I do this in custom CSS, and if so, I would be grateful for a code suggestion.

Thanks for the help!

I. Popp
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your module?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
The menu is in a module at position sidecol-1b - but it is in the reserved area.
I have sent the link and access data to info@joomla51.com.

Thanks
I. Popp
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

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

.navbar-toggler {
background: black;
}


Edit to taste

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Unfortunately it doesn't work. The problem is that the white stripes on the light gray background are difficult to see. Only after tapping the icon does the background of the icon change to a darker green color and the vertical menu is displayed.
Attachments (1)
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I do not see the suggested CSS in your source. Can you confirm that you have added it to the correct field and template style for this page? Maybe add to all styles if you have multiple.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Yes, I have some versions of the Natalie template for individual pages that I have defined a little differently. I have removed this code snippet because it didn't work. Even though I have inserted it into ALL versions of Natalie in the custom CSS.

I have now inserted your suggested code again. I have also deleted the cache, updated everything... It doesn't work.

This problem only occurs on the mobile phone. Instead of the navigation menu in the sidecol-A position, only this icon with the three white stripes appears. These are difficult to recognize.

If you tap on this, a green background appears and the submenu also appears.

It would be sufficient if these 3 stripes were displayed in a different color instead of white.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I have added the suggested CSS to the start of your custom CSS field and the issue appears to be resolved. This suggests that you have an error somewhere in your custom CSS field. Only CSS before the error will be parsed by the browser.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks, that works.
Thanks for the tip. I made these changes individually using the custom CSS without considering the impact on the entire template. My CSS knowledge is based on "try until you get the desired result" ;)

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