Sub-Navigation Bar Hover Color and Text

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Amaury
    Senior Member
    • Mar 2012
    • 1807
    • 4.2.X

    [Answered] Sub-Navigation Bar Hover Color and Text

    By default, the hover color comes from the navbar_tab_background variable, which sometimes causes text visibility issues in the sub navigation bar when hovering over the dropdown menus, such as Quick Links, depending on your style.

    Is there any CSS I could I add to additional.css to either change the hover background color or change the text color when I hover over it?



    Thanks in advance!
    Last edited by BirdOPrey5; Thu 27 Dec '12, 8:44am.
    Former vBulletin user
  • BirdOPrey5
    Senior Member
    • Jul 2008
    • 9613
    • 5.6.3

    #2
    Try...

    Code:
    .navtabs li.selected li a.popupctrl { background-color: white !important; }
    To change the background color to white

    or

    Code:
    .navtabs li.selected li a.popupctrl { color: white !important; }
    to change the font color to white.

    Comment

    • Amaury
      Senior Member
      • Mar 2012
      • 1807
      • 4.2.X

      #3
      Originally posted by Joe D.
      Try...

      Code:
      .navtabs li.selected li a.popupctrl { background-color: white !important; }
      To change the background color to white

      or

      Code:
      .navtabs li.selected li a.popupctrl { color: white !important; }
      to change the font color to white.
      Thank you.

      The first one is exactly what I want, but it also shows them hovered when not hovering over them. Any way to fix that?

      The second one I can also do via the navbar_link_color variable, and I can change the hover color with the navbar_link_hover_color variable, but that seems to only affect the single link stuff, not the dropdown menus' text, such as Quick Links.
      Former vBulletin user

      Comment

      • BirdOPrey5
        Senior Member
        • Jul 2008
        • 9613
        • 5.6.3

        #4
        Ahh... I forgot the hover-

        Code:
        .navtabs li.selected li a.popupctrl:hover { background-color: white !important; }

        Comment

        • Amaury
          Senior Member
          • Mar 2012
          • 1807
          • 4.2.X

          #5
          Originally posted by Joe D.
          Ahh... I forgot the hover-

          Code:
          .navtabs li.selected li a.popupctrl:hover { background-color: white !important; }
          That worked, thanks.

          One last question: is there any way to keep it that color when not hovering over it?

          Screenshots:

          Click image for larger version

Name:	Navigation Hover 1.png
Views:	1
Size:	399.9 KB
ID:	3690930Click image for larger version

Name:	Navigation Hover 2.png
Views:	1
Size:	410.7 KB
ID:	3690931
          Former vBulletin user

          Comment

          • BirdOPrey5
            Senior Member
            • Jul 2008
            • 9613
            • 5.6.3

            #6
            hmmm....

            Code:
            .navtabs li.selected li a.popupctrl:hover { background-color: red !important; }
            .navtabs li.selected li:hover a.popupctrl.active, .navtabs li.selected li a.popupctrl.active { background-color: red !important; )

            Comment

            • Amaury
              Senior Member
              • Mar 2012
              • 1807
              • 4.2.X

              #7
              Thanks, Joe. That worked.

              There were some other things I wanted to do, such as change the border around the dropdown menus to black / white (depending if the style was dark or light), and I couldn't get it to work, so I just decided to go with changing the hover text instead of the hover background.

              I got it to work by tweaking the codes you provided me with in here:

              Code:
              .navtabs li.selected li a.popupctrl: hover {
                  color: #EBEBEB;
              }
              Code:
              .navtabs li.selected li: hover a.popupctrl.active, .navtabs li.selected li a.popupctrl.active {
                  color: #EBEBEB
              }
              However, I've noticed something weird: when you're hovered on a dropdown, but not really hovered over it -- if that makes sense -- it stays with the color you have set for the variable. It did this even when I was playing around with the hover background.

              Screenshots (the red dots indicate where the cursor is):

              Click image for larger version

Name:	Hover 1.png
Views:	1
Size:	399.8 KB
ID:	3690932Click image for larger version

Name:	Hover 2.png
Views:	1
Size:	413.1 KB
ID:	3690933Click image for larger version

Name:	Hover 3.png
Views:	1
Size:	406.8 KB
ID:	3690934

              A live example might be better, though -- in which case, you can just visit the forum and place your cursor in those areas.
              Former vBulletin user

              Comment

              • BirdOPrey5
                Senior Member
                • Jul 2008
                • 9613
                • 5.6.3

                #8
                I see what you are saying but I'm sorry just not sure what it would be. For more advanced issues customizing styles please ask on www.vbulletin.org.

                Comment

                • Amaury
                  Senior Member
                  • Mar 2012
                  • 1807
                  • 4.2.X

                  #9
                  Originally posted by Joe D.
                  I see what you are saying but I'm sorry just not sure what it would be. For more advanced issues customizing styles please ask on www.vbulletin.org.
                  I figured I'd have to. It's not that big that I may not do anything, though.

                  Thanks for the help! You can mark this as resolved now.
                  Former vBulletin user

                  Comment

                  Related Topics

                  Collapse

                  Working...