Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Custom Menu Color (for different pages)

Custom Menu Color (for different pages)

Scheduled Pinned Locked Moved General Discussion
19 Posts 4 Posters 5.9k Views
  • 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.
  • Hayo GebauerH Offline
    Hayo GebauerH Offline
    Hayo Gebauer
    wrote on last edited by
    #1

    I achieved using different background colors for different projects/pages (using the custom css)

    Is it also possible to change the menu font color and the color of the website title for a specific page/project?

    THANKS

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by arminunruh
      #2

      Hey!

      Yeah sure

      This CSS is for the color animation:

      /* color transitions */
      .sitetitle.txt, nav.primary a{
          -webkit-transition: color 300ms ease;
          -moz-transition: color 300ms ease;
          transition: color 300ms ease;
      }
      

      This CSS is for changing the colors for projects/pages/categories individually.
      If it's a project:

      /*color for site title*/
      body[data-id="32"][data-type="project"] .sitetitle.txt{
          color: #f0f;
      }
      /*for menu*/
      body[data-id="32"][data-type="project"] nav.primary a{
      }
      

      When it's a Page:

      /*color for site title*/
      body[data-id="10"][data-type="page"] .sitetitle.txt{
          color: #f0f;
      }
      /*for menu*/
      body[data-id="10"][data-type="page"] nav.primary a{
      }
      

      Or if it's a Category:

      /*color for site title*/
      body[data-id="9"][data-type="category"] .sitetitle.txt{
          color: #f0f;
      }
      /*for menu*/
      body[data-id="9"][data-type="category"] nav.primary a{
      }
      

      Replace the data-ids with the id's of your respective projects, pages and categories. :+1:

      1 Reply Last reply
      0
      • Hayo GebauerH Offline
        Hayo GebauerH Offline
        Hayo Gebauer
        wrote on last edited by
        #3

        it works! thank you!

        now the only thing i need to make it perfect is the underline in the menu... :P

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          try the border-bottom-color css
          https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color

          1 Reply Last reply
          0
          • Hayo GebauerH Offline
            Hayo GebauerH Offline
            Hayo Gebauer
            wrote on last edited by
            #5

            thanks man

            1 Reply Last reply
            0
            • Hayo GebauerH Offline
              Hayo GebauerH Offline
              Hayo Gebauer
              wrote on last edited by
              #6

              i added this line to the code

              border-bottom-color: white;

              so it looks like this:

              /for menu/
              body[data-id="66"][data-type="page"] nav.primary a{
              color: white;
              border-bottom-color: white;
              }

              it's not working, any idea what's wrong? sorry, i never got proper education in coding

              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by arminunruh
                #7

                Try this for an active menu item:

                body[data-id="66"][data-type="page"] nav.primary .current-menu-item span {
                    border-bottom-color: pink;
                }
                

                Or this for all menu items:

                body[data-id="66"][data-type="page"] nav.primary a span {
                    border-bottom-color: pink;
                }
                

                Does that work?

                For general info on how to find the selectors please check this: https://developer.chrome.com/devtools
                and especially https://developer.chrome.com/devtools#dom-and-styles

                A little primer in CSS is useful as well: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

                :+1:

                1 Reply Last reply
                0
                • Hayo GebauerH Offline
                  Hayo GebauerH Offline
                  Hayo Gebauer
                  wrote on last edited by
                  #8

                  is the same thing also possible for the mobile menu?

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by arminunruh
                    #9

                    Well sure. I think with the links I provided to you, you can find out how that works. Your CSS needs to go into the "Custom CSS for Mobile Version" field ^^

                    I think probably the same CSS works for the mobile version if you just copy paste the CSS into the "Custom CSS for Mobile Version" field.

                    1 Reply Last reply
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #10

                      Hey!
                      In the latest Lay Theme Version you can set the background color of pages directly in the gridder. No more extra CSS needed. :)

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        maxkuwertz
                        wrote on last edited by maxkuwertz
                        #11

                        Hey Armin, i tried to use the same code for the mobile version, but it doesn't work… Is there also a way to change the background colour of the navigation for pages/projects in the mobile version? thanks a lot! !Bildschirmfoto 2015-09-07 um 12.05.54.png Bildschirmfoto 2015-09-07 um 12.06.45.png Bildschirmfoto 2015-09-07 um 12.07.00.png

                        1 Reply Last reply
                        0
                        • arminunruhA Offline
                          arminunruhA Offline
                          arminunruh
                          Global Moderator
                          wrote on last edited by
                          #12

                          Hey Max! Well I'm gonna do a customization of your Lay Theme version anyway, so you can put that on the todo list.

                          1 Reply Last reply
                          0
                          • Hayo GebauerH Offline
                            Hayo GebauerH Offline
                            Hayo Gebauer
                            wrote on last edited by
                            #13

                            I also tried modifying the menu/burger for the mobile version. Is there no way I can do it myself?
                            I tried it but it didn't work...

                            1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              maxkuwertz
                              wrote on last edited by
                              #14

                              Hey Armin, I changed my original concept, so that I can do the stuff myself… the only thing left is the bg colour for the mobile version menu…

                              1 Reply Last reply
                              0
                              • arminunruhA Offline
                                arminunruhA Offline
                                arminunruh
                                Global Moderator
                                wrote on last edited by
                                #15

                                Ok! I just tried this CSS, it works. Put it into Lay Options -> Misc Options -> Custom CSS for Mobile Version

                                .navbar {
                                    background-color: #0f0!important;
                                    border-bottom: 1px solid #00f!important;
                                }
                                nav.primary li a {
                                    color: #0f0!important;
                                }
                                nav.primary li {
                                    background-color: #f00!important;
                                    border-bottom: 1px solid #00f!important;
                                }
                                nav.primary li.current-menu-item {
                                    background-color: #00f!important;
                                }
                                
                                1 Reply Last reply
                                0
                                • Hayo GebauerH Offline
                                  Hayo GebauerH Offline
                                  Hayo Gebauer
                                  wrote on last edited by
                                  #16

                                  cool, thank you!
                                  I'll try it out

                                  1 Reply Last reply
                                  0
                                  • Hayo GebauerH Offline
                                    Hayo GebauerH Offline
                                    Hayo Gebauer
                                    wrote on last edited by
                                    #17

                                    btw is there also a code that enables the burger color to be different?

                                    1 Reply Last reply
                                    0
                                    • arminunruhA Offline
                                      arminunruhA Offline
                                      arminunruh
                                      Global Moderator
                                      wrote on last edited by
                                      #18
                                      .burger span {
                                          background-color: #000000;
                                      }
                                      

                                      Going to make Customizer settings for all of this one day :D

                                      1 Reply Last reply
                                      0
                                      • A Offline
                                        A Offline
                                        anagase
                                        wrote on last edited by anagase
                                        #19

                                        Hi Guys, any idea for doing the same with the site img? I am using an image instead of a text.
                                        I will need to use a different logo color (black or white) for each page or project.
                                        Thanks!!

                                        1 Reply Last reply
                                        0
                                        Reply
                                        • Reply as topic
                                        Log in to reply
                                        • Oldest to Newest
                                        • Newest to Oldest
                                        • Most Votes


                                        I also code custom websites or custom Lay features.
                                        💿 Email me here: 💿
                                        info@laytheme.com

                                        Before you post:
                                        1. When using a WordPress Cache plugin, disable it or clear your cache.
                                        2. Update Lay Theme and all Lay Theme Addons
                                        3. Disable all Plugins
                                        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                        This often solves issues you might run into

                                        When you post:
                                        1. Post a link to where the problem is
                                        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                        Online Users
                                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                        laytheme.com
                                        • Login

                                        • Don't have an account? Register

                                        • Login or register to search.
                                        • First post
                                          Last post
                                        0
                                        • Recent
                                        • Tags
                                        • Popular
                                        • Users
                                        • Search