- This topic has 5 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
Hi there,
I am having weird issues with alignment in the header. Sample page attached on private.
I added a top bar links, and in Internet Explorer the last element “Search” is right aligned with “Blog” (from the main menu).
But in Firefox/Chrome/Safari, “Search” is like 5px to the right using the same screen resolution.
This is happening in 1366px wide screen.Could you help us to fix this issue?
Regards,
Juan Carlos
Hi Juan,
Sorry to hear of the problem you are having.
Could you please share me the screenshots of the issue and also share your site URL where it’s happening so that i can troubleshoot it?
Best regards,
Shufflehound teamOk, find the screenshots, one for Firefox and the other one with Edge (Internet Explorer).
Sample URL: http://wp.magicswitzerland.com/destinations/interlaken/
It seems this is happening because of em unit used in the padding of menu.
You can try resolving this issue by changing unit to px by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-nav li.menu-item { padding: 0 71px 0 0; }I’ve made the changes, but stil there is some differences. On Firefox/Chrome is fine, but in IExplorer/Edge is not aligned.
I did a research in order to fix IE only, and I applied these rules in CSS:
_:-ms-lang(x), .sh-nav li.menu-item { padding: 0 76.6px 0 0; } /* for IE11 / IE 10 */
_:-webkit-full-screen, .sh-nav li.menu-item { padding: 0 76.6px 0 0; } /* for Edge */
Awesome great to see you got that fixed.
Please advise if you have more questions.
Have a fantastic day!
