newcoder1010

Having some padding issue when I hover over anchor texts

7 posts in this topic

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

One more question. I tried to place the menu center of the page. I have used this css but not working for me. Any advise please?

 

.footermenu .menu {
    text-align: center;
}

Share this post


Link to post
Share on other sites

That will only work on elements using display: inline-block; and not floated.

Share this post


Link to post
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;
}

Share this post


Link to post
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