Lay Theme Forum

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

    CSS classes for links (paragraphs and menu)

    Feedback
    2
    12
    1116
    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.
    • edgrbnz
      edgrbnz last edited by edgrbnz

      Just two quick questions:

      1. Can anyone help me out which classes I need to address in my CSS to globally alter the links (active, hover,…) in paragraphs and the links in the menubars?
        The built-in functions of Lay are fine but I'd prefer to style them with custom CSS.

      2. On my current (wip) site I have a section Work which is an overview of all the projects on my site. When entering a project the menu-item isn’t shown as active anymore.
        It’s a minor thing,… but it’s kinda inconsequent. I’d prefer to show that menu-item as active inside projects.

      Would be helpful!
      Thanks!

      ✦ ✦ ✦

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

        Dear @edgrbnz

        you can try this:

        .text a:hover {
           color: red !Important;
        }
        

        Can you send us a link to your website?

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • edgrbnz
          edgrbnz last edited by

          I tryed that CSS already, works fine.
          Except for the menu items, they just behave as they did before.

          ✦ ✦ ✦

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

            Dear @edgrbnz

            for the menu try this:

            .menu-item span:hover {
                color: yellow !important;
            }
            

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • edgrbnz
              edgrbnz last edited by edgrbnz

              Looks like I'm slowly gettign there.
              Problem is I don’t want the active menu-Item to lose it’s border-bottom when hovered. Is there any way to also target the active state via CSS to do so?

              I tryed to control that via current-menu-item but no success. Here’s the CSS I’m using so far:

              .text a{
                  color: #eee;
                  transition: ease-in-out 0.15s;
              }
              
              .text a:hover{
                  color: #fff;
                  text-shadow: 0 0 4px #fff;
                  border-bottom: none;
                  transition: ease-in-out 0.15s;
              }
              
              .menu-item span {
                  color: #eee;
                  transition: ease-in-out 0.15s;
              }
              
              .menu-item span:hover {
                  color: #fff;
                  text-shadow: 0 0 4px #fff;
                  border-bottom: none;
                  transition: ease-in-out 0.15s;
              }
              

              And also question #2 → Is there a way to fix that? I sent a link and password via chat.

              ✦ ✦ ✦

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

                Dear @edgrbnz
                if the menu point WORK would be a category it would not be a problem.

                Try this instead:

                .type-project .menu-item-302 span {
                    color: yellow !important;
                }
                
                

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • edgrbnz
                  edgrbnz last edited by

                  Thanks Marius!

                  Will try the CSS later on.

                  Confused about this one:
                  How can I make a category a page and use a thumbnail grid or similar there?

                  ✦ ✦ ✦

                  1 Reply Last reply Reply Quote 0
                  • edgrbnz
                    edgrbnz last edited by edgrbnz

                    Oh,…
                    I wasn’t expecting to find another gridder inside the categories… that problem is solved now! Thank you for the hint @mariusjopen!!

                    Now I'm just fiddeling with the css to get the underline / border-bottom to stay when a currently active menu point gets hovered. Just cannot get it to work.
                    Let’s say the currently active page is work or any project in that category. So work will be underlined (because it’s active). As soon as it gets hovered the underline disappears although I want it to stay.

                    I hope that makes any sense—but I think you can see what I'm trying to describe with the link and pass I sent you.
                    This is the code I tryed to address this behaviour with:

                    .menu-item span {
                        color: #eee;
                        transition: ease-in-out 0.12s;
                    }
                    
                    .menu-item span:hover {
                        color: #fff;
                        text-shadow: 0 0 4px #fff;
                        border-bottom: none;
                        transition: ease-in-out 0.12s;
                    }
                    
                    .current-menu-item span:hover {
                        color: #fff;
                        text-shadow: 0 0 4px #fff;
                        transition: ease-in-out 0.12s;
                    }
                    

                    I think I’m just targeting the wrong class with the .current-menu-item. Any help is very much appreciated.

                    ✦ ✦ ✦

                    1 Reply Last reply Reply Quote 0
                    • edgrbnz
                      edgrbnz last edited by

                      Still need help with this.
                      Is there a class to target the active hovered item?

                      Any help is very much appreciated.

                      ✦ ✦ ✦

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

                        Dear @edgrbnz

                        does this solve the issue?

                        .menu-item span:hover {
                            border-bottom: 2px solid brown !important;
                        }
                        
                        .current-menu-item span {
                            border-bottom: 2px solid brown !important;
                        }
                        
                        .current-menu-item span:hover {
                            border-bottom: 2px solid brown !important;
                        }
                        

                        Or did I not understand you right?

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 1
                        • edgrbnz
                          edgrbnz last edited by

                          I think the good ol’ !important; solved it!
                          Just for reference the code I am using right now:

                          /*custom link styles*/
                          
                          .text a{
                              color: #eee;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .text a:hover{
                              color: #fff;
                              text-shadow: 0 0 4px #fff;
                              border-bottom: none;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .caption a{
                              color: #eee;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .caption a:hover{
                              color: #fff;
                              text-shadow: 0 0 4px #fff;
                              border-bottom: none;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .menu-item span {
                              color: #eee;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .menu-item span:hover {
                              color: #fff;
                              text-shadow: 0 0 4px #fff;
                              border-bottom: none;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .current-menu-item span {
                              color: #eee;
                              border-bottom: 1.2px solid #eee !important;
                              transition: ease-in-out 0.12s;
                          }
                          
                          .current-menu-item span:hover {
                              color: #fff;
                              text-shadow: 0 0 4px #fff;
                              border-bottom: 1.2px solid #fff !important;
                              transition: ease-in-out 0.12s;
                          }
                          

                          Thank you @mariusjopen !

                          ✦ ✦ ✦

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

                            Dear @edgrbnz
                            you are very welcome!

                            Best!

                            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

                            N
                            A
                            S
                            7
                            T

                            Recent Topics

                            • A

                              can't change front page

                            • A

                              Theme crashed - because of Polylang?

                            • M

                              komische boxen auf der Website

                            laytheme.com