Change burger icon
-
Hi,
I want to change the burger icon from default to a + sign.
I’m using this css code right now, but maybe there is a simpler solution? Maybe even change it to an (svg) image?
cheers
.burger::after { content: "+"; color: #000; overflow:visible; } .burger span { display: none; } nav.primary.transition .burger::after { content: "-"; } .burger::after { content: "+"; color: #000; line-height: 1; height: 100%; margin-top: -4px; } .burger::after { content: "+"; color: #000; line-height: 1; height: 100%; margin-top: -4px; } .burger.active::after { padding-left: 1px; content: "—"; } .burger { font-weight: 400; position: absolute; top: 0; right: 0; overflow: visible; margin: 0px; padding-left: 15px; padding-right: 15px; width: 45px; height: 100%; font-size: 25px; text-indent: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; -webkit-transition: background 0.2s; transition: background 0.2s; background-color: transparent; display: flex; justify-content: space-around; } .burger::after { content: "+"; color: #000; line-height: 1; height: 100%; margin-top: -4px; } .burger.active::after { content: "–" !important; }`
-
hey TKN!
there's no easy way to change the burger icon right now. I need to add an option for that one day. I didn't try out your custom css, but I guess there's no way around using custom css at the moment.
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it