How to Change Size of Hover Image in Nav Menu?

by 20 replies
23
How do I go about making the boxes that show up when you hover over the navigation menu items smaller on this site?

I selected that portion of the screen and inspected it from within Firebug, but I'm not sure which value modifies the size of the boxes upon hover-over.

I've spent some time changing some values in Firebug, but have unsuccessful in identifying what specific value modifies this.
#website design #change #hover #image #menu #nav #size
  • a:hover img {
    width: 160px; <==== CHANGE THIS
    position: absolute;
    top: -25%;
    left: 0;
    margin: 0 0 0 -30px;
    border: 5px solid #333;
    • [1] reply
    • I can't find that anywhere in the style.css.

      Where exactly did you see that piece of code in my style.css?
      • [1] reply
  • If I was you I would use HTML5's transform as just increasing the size will play havoc with your layout.
    • [2] replies
    • I just Google'd to learn what it is, but I don't understand how to go about implementing that. How do I do it?
      • [1] reply
    • I think you mean CSS3 transform property...
      • [1] reply


  • It's in the global_v4.3.30.css as far as I can see from my side. The lines won't be numbered unless you are using a program like dream weaver.

    You can can try using the important declaration on an a hover element in your style. Css to override the other file, but that's kind of lazy coding. My phone won't let me type it correctly. I'll show you how when I get home.

    edit: OK I"m home and can show you now. You can try adding the following code to your style.css and see if it works. Sometimes it will work, and other times it wont. Like I said above though, it's kind of lazy coding and can cause issues down the line if you forget it's there and try to make other changes etc..

    Code:
    a:hover img {
width: 160px !important;  <==== CHANGE THIS
position: absolute;
top: -25%;
left: 0;
margin: 0 0 0 -30px;
border: 5px solid #333;
}
  • OH CRAP! Lol, I thought the tinypic site was your site! I've been giving you the code from their site. I thought we were talking about the hover images at the bottom of tinypic.com until I saw someone else using the site to link one of their images just now. What is your actual domain name so I can look at the code?

    edit: I found it. Look for the following code on line 598. You'll have to add a height and a top margin:
    Code:
    media="screen"
ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a {
text-decoration: none;
}
    • [1] reply
    • Thanks! How do I add the necessary margins? I'm still learning this stuff. Thanks for your help, sir.
      • [1] reply
  • Secondly, your question was also vague...and unclear...

    ""boxes that show up when you hover over the navigatio1n menu items""

    Those are not boxes, that is background color/image on hover. If you make them smaller on hover, can you imagine how ugly the layout would look then ?

    Thirdly, your question might have meant something else, but the replies here confused you more and more...
    • [1] reply
    • You're right; I am confused. I would love to take the time to learn more CSS, however my time doesn't allow for it right now.

      I believe Longblog's reply above was intended to help me accomplish what I'm looking for, but he said I needed to add margins, and I need help figuring out how to do so.
  • good stuff thanks i was looking for this info asweel
  • It can be a little tricky with navs if you don't know what to look for.
    You don't need to add or edit margins.

    In your style.css you have this on line 560:
    Code:
    ul.art-hmenu>li>a {
padding: 0 15px;
margin: 0 auto;
position: relative;
display: block;
height: 53px;
cursor: pointer;
text-decoration: none;
color: #517AC8;
line-height: 53px;
text-align: center;
}
    The 2 parts that you need to change are the "height" and "line-height".

    You could change those to something like 33 or 35.
    To test it without committing to the change, open firebug or web developer and in the left panel select the href in this line:
    Code:
    <li class="menu-item-1413">
<a title="Homeowners" href="http://myhousesforsaleindetroit.com/home-owner-resources/">Homeowners</a>
</li>
    Don't select the "li", select the link inside. (<a title="blah blah)
    Now look on the css right pane, scroll down and you'll see the block of code I pasted up top.
    Change the height and line-height to get the desired heights.
    Then you can physically change it.
    • [ 1 ] Thanks
    • [1] reply
Join the discussion

Next Topics on Trending Feed