Menu font seems to shrink while hover WordPress
- SOLVED
Hi! I run wordpress with headwaytheme.
I have a main menu (menu wein lokal....)
When I hover over them (not the ones with submenus) it should show italic. This is fine, but somehow it looks like the font is a tiny bit jumping or smaller in height... maybe I am wrong but it looks not right.
Kind of the same with the word "newsletter" in my footer menu. When I hover it jumps somehow compared to the other menu-entries besides "newsletter.
http://alpha.restaurant-richard.de/willkommen/
you need a password to see the site: noellenheidt666
Any idea?
Klaus
Answers (3)
Asad Iqbal answers:
Your font-size looks same, but for italic it may look like that. You may make it italic with bold and It may looks more balanced.
Pali Madra answers:
In your main style sheet look for this code
.block-type-navigation ul.menu li.menu-item-2103 a:hover, .block-type-navigation ul.menu li.menu-item-2102 a:hover, .block-type-navigation ul.menu li.menu-item-1389 a:hover {
font-size:1em !important;
font-style:italic;
height:32px !important;
}
change this to
.block-type-navigation ul.menu li.menu-item-2103 a:hover, .block-type-navigation ul.menu li.menu-item-2102 a:hover, .block-type-navigation ul.menu li.menu-item-1389 a:hover {
font-size:1em !important;
height:32px !important;
}
This should do the trick for the navigation menu
For the <strong>footer newsletter link</strong> look for this code
.block-type-navigation ul.menu li.menu-item-40 a:hover {
color:green !important;
font-family:times,serif !important;
font-size:1em !important;
font-style:italic;
letter-spacing:0.1em !important;
padding:0 !important;
}
and <em>replace it with </em>
.block-type-navigation ul.menu li.menu-item-40 a {
color:orange;
font-family:'Times New Roman' !important;
font-size:1em !important;
letter-spacing:0.1em !important;
padding:0 !important;
width:130px !important;
}
Lastly for the <strong>jobs and impressum links in the footer</strong> look for this code
.block-type-navigation ul.menu li.menu-item-36 a:hover, .block-type-navigation ul.menu li.menu-item-37 a:hover {
color:red;
font-family:times,serif !important;
font-size:1em !important;
font-style:italic;
letter-spacing:0.1em !important;
padding:0 !important;
}
and<em> replace it with </em>
.block-type-navigation ul.menu li.menu-item-36 a:hover, .block-type-navigation ul.menu li.menu-item-37 a:hover {
color:red;
font-family:times,serif !important;
font-size:1em !important;
letter-spacing:0.1em !important;
padding:0 !important;
}
That should do it for you
klaus dyba comments:
But than its not italic on hover?? Makes no sense...
klaus dyba comments:
I think i have to live with that, but the "newsletter" link jumps differently then the others. Is there something wrong with the width of the over link??
Pali Madra comments:
Sorry I did not understand your question. Do you want the menu links to have an italic style when you hover over them?
In the header menu if you see the first two links do not have a italic style when you hover over them. The other three menus "Jobs" "kuche" and "Kontact" seem to change in size when you hover over them because the text also becomes bold. This is happening because the following CSS changes the style to bold
.block-type-navigation ul.menu li.menu-item-2103 a:hover, .block-type-navigation ul.menu li.menu-item-2102 a:hover, .block-type-navigation ul.menu li.menu-item-1389 a:hover {
font-size:1em !important;
font-style:italic;
font-weight:bold !important;
height:32px !important;
}
As far as the Newsletter link in the footer is concerned, it seems to jump up as the style of the font changes to italic. If you make the changes as advised earlier the newsletter link will not change its style to italic when you hover over it and I think that will also remove the jumping look it gives.
klaus dyba comments:
the first 2 in the main menu are supposed not to be italic while hovering over it (cause it has a submenu - a wish from the client). The other 3 should be italic while hover. I made the hover now bold cause it jumbs not that much. As mentioned above it seems that the italic-version looks very different. Thats why they kind of jump.
But for the "newsletter"-link if you compare it to "jobs" and "impressum" it defenitly changes in another way... maybe its the font i dont know. I had this when I didnt set the with of the menu item, but I did...
Pali Madra comments:
Thank you for clarifying the header links.
There seems to be an issue with the Newsletter link. Maybe it is the font as you said.
I do not want to waste too much time of any one however, I was wondering why the footer links have different classes (an in them there seem to some widths defined as well). I'm pretty sure there is a reason for having different styles and widths but cleaning or applying the same base styles might even out things and might take away the discrepancy you are seeing.
All said and done the links (only on hover) do misbehave slightly but feel the difference is not too noticeable and might be font quirk itself.
Thanks
daas answers:
Hi,
It seems that page does not work. I can see only grey background and "Page not found" message in title.
klaus dyba comments:
Should work now.
daas comments:
In fact, size of normal and italics font is same. That's how italics font looks like.