-
Posts
-
Ishmael,
You closed the other topic I had opened before I could respond. The colors look fine in IE8, but the icons are still “squared” AND, the search button is still not in-line with the navigation and creates additional space in the header.
I will reply with private message with the URL as I do not want it crawled by engines.
Hi!
1) IE8 does not support rounded corners because it doesn’t support css3 code (see “Browser support” section here: http://www.w3schools.com/cssref/css3_pr_border-radius.asp ). IE8 users won’t see round icons or borders in general and there’s no fix for it. If they want to see modern, round icons they need to switch to a better browser.
2) You can try to insert following code into the quick css field to fix the issue with the search icon
.main_menu ul:first-child > li > a { padding: 0 8px\9; }Best regards,
PeterHi Peter,
The search icon is still not being displayed in-line when viewing it inside of IE8. I also found the exact same issue when testing the site on my iPad. In both Chrome (and Safari) on my iPad 4 (OS 6.1.3), the search icon is pushing the rest of the header border down, and the slider is no longer mortised to the top of the nav bar exactly the same as it appears in IE8.
Would you please take a look on the iPad as well? This is a pretty large eyesore that I’ll need to resolve before we can launch our site.
Thanks so much!
Mark
Hey!
Because the menu items you have are so wide, when IE8 views the site they cause the last icon to wrap. IE8 doesn’t have media query support so it drops down to the smallest default grid size the theme has instead of the wider size you see in other browsers.
What you can do is use a plugin like this to add in IE8 specific css to increase the container width for the header nav: http://wordpress.org/plugins/ie-css-definer/
#header #header_main_alternate > .container { width: 930px; }On every other device and browser however i’m having no issues with the icon wrapping.
Best regards,
DevinDevin,
What about the iPad? I can reproduce in Safari and Chrome on my iPad and the search icon isn’t in-line either and pushes it all down.
Thanks!
Mark
If its happening on others then you could add it to your custom.css file in a media query to help there as well:
Something like:
@media only screen and (min-width: 768px) and (max-width: 1060px) { #header #header_main_alternate > .container { width: 930px; } }And adjust the upper and lower values as needed.
So that did help with making the search icon in-line with the rest of the nav on the ipad in landscape mode, but only if in landscape mode – as soon as I turn it, the remaining navigation and search icon gets cut off and doesn’t fit on the screen at all. Shouldn’t the responsive navigation pop up as soon as I turn it since it doesn’t fit?
I also noticed that on the browser on a desktop, these settings have made all of the heading and primary navigation fonts thicker and bold? As soon as I remove the media code above, it reverts back to the normal looking fonts which is the look I like.
It shouldn’t and as far as I know can’t effect the fonts just by modifying the container.
The values above can be adjusted to fit as you need them. The upper and lower limit were just loose guesses. If you ever add any more menu items for example the values would need to be adjusted further. Its just a case where the character limit for the default layout has been reached and the logical step for the menu is to start to wrap because of the container.
So increasing the container value (930px) or when it first starts to take effect (max-width) or even when it stops working (min-width) will take a bit of adjustment to get it working.
I guess I just don’t understand how to get the header to look right when not in landscape mode with the iPad. I would love the responsive menu to either show or have the navigation and search bar fit no matter how I turn the device. Right now, it looks fine in landscape, but as soon as I turn it, it cuts off the last navigation menu item and the search icon. If I adjust the .container width down from 930px to make it fit when not in landscape mode, the search icon drops down a row in landscape mode which is back to the original problem.
I’m not sure what I’m missing – is there a way to keep the width at 930px so it displays in landscape properly on the ipad, but when/if a user turns the ipad vertically, the menu either fits or shows the responsive menu option instead of being cut off?
Hey!
Please go to wp-content\themes\enfold\js folder and open Avia.js file and find
bottom_menu = $('html').is('.bottom_nav_header'), switchWidth = 767;and change it to
bottom_menu = $('html').is('.bottom_nav_header'), switchWidth = 800;It will increase the width to switch to mobile menu from 767px to 800px. Please flush browser cache and settings if you are using cache plugin after making changes and refresh your page a few times.
Cheers!
Yigit
- The topic ‘IE8 Header alignment with search button’ is closed to new replies.