Lay Theme Forum

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

    Custom Menu Color (for different pages)

    General Discussion
    4
    19
    5319
    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.
    • Hayo Gebauer
      Hayo Gebauer last edited by

      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 Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by arminunruh

        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 Reply Quote 0
        • Hayo Gebauer
          Hayo Gebauer last edited by

          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 Reply Quote 0
          • arminunruh
            arminunruh Global Moderator last edited by

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

            1 Reply Last reply Reply Quote 0
            • Hayo Gebauer
              Hayo Gebauer last edited by

              thanks man

              1 Reply Last reply Reply Quote 0
              • Hayo Gebauer
                Hayo Gebauer last edited by

                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 Reply Quote 0
                • arminunruh
                  arminunruh Global Moderator last edited by arminunruh

                  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 Reply Quote 0
                  • Hayo Gebauer
                    Hayo Gebauer last edited by

                    is the same thing also possible for the mobile menu?

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

                      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 Reply Quote 0
                      • arminunruh
                        arminunruh Global Moderator last edited by

                        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 Reply Quote 0
                        • M
                          maxkuwertz last edited by maxkuwertz

                          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 Reply Quote 0
                          • arminunruh
                            arminunruh Global Moderator last edited by

                            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 Reply Quote 0
                            • Hayo Gebauer
                              Hayo Gebauer last edited by

                              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 Reply Quote 0
                              • M
                                maxkuwertz last edited by

                                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 Reply Quote 0
                                • arminunruh
                                  arminunruh Global Moderator last edited by

                                  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 Reply Quote 0
                                  • Hayo Gebauer
                                    Hayo Gebauer last edited by

                                    cool, thank you!
                                    I'll try it out

                                    1 Reply Last reply Reply Quote 0
                                    • Hayo Gebauer
                                      Hayo Gebauer last edited by

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

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

                                        .burger span {
                                            background-color: #000000;
                                        }
                                        

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

                                        1 Reply Last reply Reply Quote 0
                                        • A
                                          anagase last edited by anagase

                                          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 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
                                          T

                                          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