4 Replies Latest reply on Jun 17, 2019 9:50 AM by Arun2912

    Change the background color of active tab and add line below

    Arun2912

      I'm trying to change the background color of Active tab in Apex 18.2

       

      Current:

       

      Required

       

       

      I have tried below, but not working

       

      1)  

      .t-Header-nav-list .a-MenuBar-item.a-Menu--current.is-focused { 

        border-bottom: 2px solid blue;

        background-color : blue;

      }

       

      2)

      .t-Header .a-MenuBar-item.a-Menu--current, .t-Header .a-MenuBar-item.a-Menu--current.is-focused {
       
      border-bottom: 2px solid blue;

         background-color : blue;

      }

        • 1. Re: Change the background color of active tab and add line below
          Franck N

          Hi,

           

          you where almost there

          use the css bellow instead:

           

          .t-Header .a-MenuBar-item.a-Menu--current, .t-Header .a-MenuBar-item.a-Menu--current.is-focused {
            background-color : Aqua !important;
            border-bottom: 2px solid blue !important;
          }
          .t-Header .a-MenuBar.a-MenuBar {
          height: 100%;
          }
          

          regards,

          Franck

          • 2. Re: Change the background color of active tab and add line below
            Arun2912

            Hi Franck,

             

            Above solution worked. But not working when doing mouse hover. I was trying the same while hovering over the tabs with below code. But it is not working. Can you suggest a way for it?

             

            1. .t-Header .a-MenuBar-item.a-Menu--current:hover, .t-Header .a-MenuBar-item.a-Menu--current.is-focused:hover
            2.   background-color : Aqua !important
            3.   border-bottom: 2px solid blue !important
            4. .t-Header .a-MenuBar.a-MenuBar { 
            5. height: 100%
            6. }
            • 3. Re: Change the background color of active tab and add line below
              Franck N

              Hi,

              Arun2912 schrieb:

               

              Hi Franck,

               

              Above solution worked. But not working when doing mouse hover. I was trying the same while hovering over the tabs with below code. But it is not working. Can you suggest a way for it?

               

              1. .t-Header .a-MenuBar-item.a-Menu--current:hover, .t-Header .a-MenuBar-item.a-Menu--current.is-focused:hover {
              2. background-color : Aqua !important;
              3. border-bottom: 2px solid blue !important;
              4. }
              5. .t-Header .a-MenuBar.a-MenuBar {
              6. height: 100%;
              7. }

              her you go:

              this is just for the hovering

               

              .t-Header .a-MenuBar-item.is-focused, t-Header .a-MenuBar-item:hover {
                 background-color : Aqua !important;
                border-bottom: 3px solid red!important;
              }
              

               

               

              For both to happen you need to keep all css then:

               

              .t-Header .a-MenuBar-item.a-Menu--current, .t-Header .a-MenuBar-item.a-Menu--current.is-focused,.t-Header .a-MenuBar-item.is-focused, t-Header .a-MenuBar-item:hover {
                 background-color : Aqua !important;
                border-bottom: 3px solid red!important;
              }
              .t-Header .a-MenuBar.a-MenuBar {
                  height: 100%;
              }
              

               

              regards,

              Franck

              1 person found this helpful