1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I change hover for menu and sub menu?

Discussion in 'CSS' started by Rashida H., Apr 8, 2019.

0
  1. #1
    Hello!

    WEBSITE URL: https://www.vdigital.co/

    I want to change the "hover" color of my menu and sub menu.

    upload_2019-4-8_15-8-24.png


    Kindly guide, how can I do the needful.

    Thanks!
     
    Rashida H., Apr 8, 2019 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    You can do all these things on your own. Just right click over the item you want to edit. Then click Inspect in the drop down menu. It will show you the divs and the .css of that item. Find that item in your .css file and adjust it to your liking. It's that easy.
     
    qwikad.com, Apr 9, 2019 IP
  3. Rashida H.

    Rashida H. Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hello @qwikad.com

    I agree. I tried, but it's not working. I did exactly the same "click on Inspect" and made changes for hover on menu.

    For hover on menu: (this is the change I made, but it didn't show)

    ul.dropdown-menu li a: hover {
    color: #ffce00;
    }

    For hover on sub menu:
    I couldn't find the right div or .css.

    Can you please guide me to correct these?
    WEBSITE: https://www.vdigital.co/
    (for your reference).

    Thanks & Regards!
     
    Rashida H., Apr 9, 2019 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    You can't have a space between a: hover, it should be a:hover
     
    qwikad.com, Apr 9, 2019 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    This works (not fully tested). I simply added it to the top of the embedded style element rather than dig through the PoS source from the WP/theme to locate the appropriate style context.
    #main_menu li a:hover {
    color: green;
    }
    Code (markup):
    gary
     
    kk5st, Apr 9, 2019 IP
  6. Rashida H.

    Rashida H. Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Hi @kk5st

    It worked. But when I hover above or below the menu item - the changed hover color doesn't show but the previous one.
     
    Rashida H., Apr 9, 2019 IP
  7. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #7
    @Rashida H. try this

    #main_menu>li .sub-menu li>a:hover {
    color: #172d63;
    background: #ffce00;
}
    Code (CSS):
    [​IMG]

    just change the color to your choice... the hover should works on first and second level of sub-menu.
     
    alfieindesigns, Apr 10, 2019 IP
  8. Rashida H.

    Rashida H. Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    Hello @alfieindesigns

    Thank you so much for the help.
    The hover color on the sub menu has changed and so is the menu hover color.

    But I am still having a slight issue with the menu hover color - It has changed to the my desired color #ffce00 but when I move my mouse little above or below the menu (about, services and contact) - it still shows the "blue" color. How can I change that?

    Kindly advise.
    Much appreciated.

    Regards!
     
    Rashida H., Apr 10, 2019 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    The LI element has padding which creates space around the A element. See the minimal test case below.
    
<!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content=
    "width=device-width, height=device-height, initial-scale=1"
  name="viewport">

  <title>
  Test document
  </title>
  
  <style type="text/css">

  /*<![CDATA[*/

  body {
   background-color: white;
   color: black;
   font: 100%/1.5 sans-serif;
   margin: 0;
   padding: 1em;
  }

  p {
   font-size: 1em;
  }

  #wrapper {
   margin: 0 auto;
   max-width: 65em;
  }

  h1 {
   font-family: serif;
   margin-bottom: 0;
   text-align: center;
  }

  /* end boilerplate */

  ul#main-menu,
  ul#main-menu li {
   display: table;
   margin: auto;
   padding: 0;
  }

  ul#main-menu li a {
   background-color: orange;
   color: blue;
   display: inline-block;
   padding: 1em;
  }

  ul#main-menu li a:hover {
   background-color: blue;
   color: orange;
  }  

  /*]]>*/
  </style>
  </head>
  <body>
    <div id="wrapper">
    <h1>
       :hover over entire container
    </h1>

    <ul id="main-menu">
       <li>
          <a href="#">item 1</a>
          <ul>
            <li>
              <a href="#">item 1a</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- end wrapper -->
</body>
</html>
    Code (markup):
    gary
     
    kk5st, Apr 10, 2019 IP
  10. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #10
    Hello,

    Here's complete code for those.

    /* stay hover state color on menu */
#main_menu>li:hover > a {
    color: #ffce00;
}

/* hover bg and color of sub menu */
#main_menu>li .sub-menu li>a:hover {
    color: #172d63;
    background: #ffce00;
}
    Code (CSS):
    [​IMG]
     
    alfieindesigns, Apr 12, 2019 IP