Lay Theme Forum

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

    Burger colour mobile

    General Discussion
    2
    9
    578
    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.
    • T
      Toby last edited by

      HI

      Im trying to change the colour of the burger on the mobile version to coincide with my coloured category pages / projects

      www.tobyneilan.com

      i have pasted in this this code - example given for "isolated" project

      .slug-fashion .burger span {
      background-color: #ff1900;
      }
      body[data-type="category"][data-id="5"] .burger span:before,
      body[data-type="category"][data-id="5"] .burger span:after{
      background-color: #ff1900;
      }
      body[data-type="project"][data-id="875"] .burger span:before,
      body[data-type="project"][data-id="875"] .burger span:after{
      background-color: #ff1900;
      }

      It works on the category pages but on the project page the middle bar of the menu remains white

      have I missed something in my code?

      Cheers
      Toby

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @Toby
        you need to paste this code also in the MOBILE CSS section and not only in the DESKTOP CSS section.

        I hope that solves the issue!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • T
          Toby last edited by

          @toby said in Burger colour mobile:

          body[data-type="category"][data-id="5"] .burger span:before,
          body[data-type="category"][data-id="5"] .burger span:after{
          background-color: #ff1900;
          }
          body[data-type="project"][data-id="875"] .burger span:before,
          body[data-type="project"][data-id="875"] .burger span:after{
          background-color: #ff1900;
          }

          Hi Marius
          The code is already in my mobile css section - I added to my desktop section too
          but the white middle bar still remains!?

          Cheers
          Toby

          T 1 Reply Last reply Reply Quote 0
          • T
            Toby @Toby last edited by

            @toby

            Hi Marius

            Any clues to why the middle bar still remains white?

            Cheers
            Toby

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Hi @Toby
              but now it seems to work, right?

              Best!

              Marius

              0_1514629592484_Bildschirmfoto 2017-12-30 um 11.25.43.png

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • T
                Toby last edited by

                @mariusjopen

                Hi Marius

                It does until you click through into the project pages and then the middle line turns white.

                Cheers
                Toby

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Hi @Toby
                  it looks like you need to add more custom CSS code.

                  Try to add this as well:

                  .burger span, .burger span:before, .burger span:after {
                      background: red !important;
                  }
                  

                  All the best and a happy new year!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • T
                    Toby last edited by

                    @mariusjopen said in Burger colour mobile:

                    .burger span, .burger span:before, .burger span:after {
                    background: red !important;
                    }

                    Hi Marius

                    HNY

                    Thanks however adding that code turns the menu bar red throughout my website - overwriting the other colour changes I have for my categories - blue for architecture / green for portraits etc
                    is there a way to isolate that code to the project page?

                    Cheers
                    Toby

                    1 Reply Last reply Reply Quote 0
                    • mariusjopen
                      mariusjopen Global Moderator last edited by

                      Hi @Toby
                      exactly. Since you have different colors for different pages.
                      It is quite complex to adjust the colors. Quite a pain in the ass :-)

                      You need to play around with it. Things interfere with each other and the code can get quite messy.

                      You are almost there!

                      Good luck!!

                      Marius

                      www.mariusjopen.world

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

                      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

                      Recent Topics

                      • T

                        OpenType Feature

                      • T

                        Split Screen just on front page / subpages without the split?

                      • T

                        problem when I click on the category filter buttons on mobile

                      • G

                        z index has different behaviors on different pages

                      laytheme.com