newcoder1010 Posted February 12, 2017 Share Posted February 12, 2017 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 More sharing options...
dsonesuk Posted February 13, 2017 Share Posted February 13, 2017 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 More sharing options...
newcoder1010 Posted February 13, 2017 Author Share Posted February 13, 2017 I just removed font-size:16px; from both selectors. Problem is fixed. Thank you. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 13, 2017 Author Share Posted February 13, 2017 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; } Link to comment Share on other sites More sharing options...
dsonesuk Posted February 13, 2017 Share Posted February 13, 2017 That will only work on elements using display: inline-block; and not floated. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 13, 2017 Author Share Posted February 13, 2017 Sorry I am not able to follow you. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 13, 2017 Share Posted February 13, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now