0

I have a website https://goo.gl/fk8X7z which is showing Nav. menu rendering issue on Google Chrome Version 53.0.2785.143 of Windows 10. The Store menu is totally off from it's original position which is Black Stripe (http://prntscr.com/ctvxgv) The same menu is appearing fine on Windows 7. How we can fix this?

Thanks!

  • I've noticed this issue with my own work a few times. I honestly don't know the answer, but it seems like different platforms will render fonts with very slight size differences. I usually just nudge the padding/width of my menu items down 1px to hack around the issue. There might be a better way to do it with flexbox, though. – The Maniac Oct 14 '16 at 19:43
0

Your 'ul' element is set to have width of 1000px, and last child 'li' element is breaking on new line on some systems because there is not enough space for all elements in one line (one some systems due to font rendering, percentage calculations, etc..)

You could make 'ul' element 100% wide, and center inner 'li' elements.

.main_menu1 .wrapper {
    width: 100%;
    text-align: center;
}

.nav1 .main_menu1 ul li {
    display: inline-block;
    float: none;
}

That should fix what you would call a bug for screens larger than your wrapper max-width of 1000px. What it is; is actually a bad practice in regards to responsiveness of website to have child elements fit exactly in pixel in container; without use of percentage values, some other technique, or to be prepared if elements break on new lines. And you still have to fix issues with menu on smaller screens (below or near your wrapper max-width of 1000px). In less words; Menu is not exactly responsive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.