Hamburger icon not visible

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
tompasworld
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Wed Jun 14, 2006 10:20 am

Hamburger icon not visible

Post by tompasworld » Wed Oct 13, 2021 7:25 am

Hi,
I have played around with the css for my Joomla 4 test site to change the font color for my top menu, and have some how managed to change the css for the "hamburger" menu in user.css.

I copy the whole template,css to a user.css file when starting new test sites and go from there, so the template.css should be intact.

The menu still exists when I hover over it according to Firefox web developer tools (or what they are called in english Firefox), the "icon" is invisible though.
How do I get it visible again?

View it here if wanted/needed: jikrantz.se/next

Regards,
Tompa

Aidan38
Joomla! Ace
Joomla! Ace
Posts: 1375
Joined: Mon Aug 06, 2012 8:51 am
Location: France Paris/Grenoble
Contact:

Re: Hamburger icon not visible

Post by Aidan38 » Wed Oct 13, 2021 7:43 am

Hi !

It appears that your icon is white.
Actually you have in you user.css
.container-header .navbar-toggler {
color: white;
cursor: pointer;
border: 1px solid white;
}

Change color and normally your icon display.

I hope to help you, keep me informed

Regards,
Learn how create your website with Joomla! 4 The book https://cinnk.com/en/books/joomla-4-the-book
Create your online shop with Joomla! & HikaShop https://cinnk.com/en/books/create-your- ... a-hikashop

tompasworld
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Wed Jun 14, 2006 10:20 am

Re: Hamburger icon not visible

Post by tompasworld » Wed Oct 13, 2021 8:05 pm

Thanks. :)

I had a "can´t see the forest for all the trees" moment. It works fine now.
One thing though... I noticed that when clicking the menu (using my phone and not firefox this time), the border became "thicker" around the hamburger. Is there a way to have the hamburger border to have same thickness all the time?

Aidan38
Joomla! Ace
Joomla! Ace
Posts: 1375
Joined: Mon Aug 06, 2012 8:51 am
Location: France Paris/Grenoble
Contact:

Re: Hamburger icon not visible

Post by Aidan38 » Tue Oct 26, 2021 2:34 pm

Hi !

Great !! 😊
For the border, try this in your file css
.container-header .navbar-toggler {
box-shadow: none;
}
Learn how create your website with Joomla! 4 The book https://cinnk.com/en/books/joomla-4-the-book
Create your online shop with Joomla! & HikaShop https://cinnk.com/en/books/create-your- ... a-hikashop


Post Reply

Return to “Templates for Joomla! 4.x”