Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Change burger icon

    General Discussion
    burger menu
    2
    2
    702
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by A Former User

      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;
      }`
      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post

        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

        Thanks!

        Online Users

        L
        M
        J
        C

        Recent Topics

        • L

          Hide mobile menu, when scrolling down

        • J

          Imagehover addon show mouseover state

        • F

          X-button (close) on category page

        • T

          display resolution of thumbnails in image-hover

        laytheme.com