Jump to content

Having some padding issue when I hover over anchor texts


newcoder1010

Recommended Posts

Hello,

 

I have a menu called footermenu in the bottom of my page. When I hover over the menu items, I see menu items are dancing around. Some items even going to another row when i hover the items. It works fine in desktop. Problem is with mobile and tablet. I spent lot of time trying to figure this out and I could not do it.

 

https://drive.google.com/file/d/0B7xIEuVi005yVkt5VG1yeUJMNnc/view?usp=sharing

 

My site. If you could inspect and see why footermenu in mobile and tablet giving the problem when I hover? I just like to give a color when I hover.

 

Thanks.

Link to comment
Share on other sites

You have two selector references to change font-size 0n hover

 

.nav > li > a:hover {
color: red;
font-size: 16px;
}

 

a:hover {
color: red;
font-size: 16px;
}
When the other floated left menu items try to position themselves to the left, because the height is increase due to the font-size increase, it juts out at the bottom, and top corner tucks into the bottom right edge, the other menu items cannot fit in the area available and so move to next row.
Link to comment
Share on other sites

Using display: inline-block; means elements using this will act like text, like centring text in paragraph, but unlike elements that use display: inline; you can adjust width and height, drawback is that it add space the size of font used between each element, that is where font-size:0; is used to remove the space from wrapping container element, then reinstated in the li element so the anchor text can be seen.

.footermenu .menu {
    font-size: 0;
    text-align: center;
}

.footermenu .menu.nav li {
      display: inline-block;
    font-size: 14px;
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...