Jump to content
Sign in to follow this  
timlarner

NavBar stays expanded in mobile version (+ other IE8 issues)

Recommended Posts

timlarner

I'm having a few issues with the NavBar on my site. 1) When I view the site on a mobile device or shrink the browser, the NavBar fully expands and stays that way. The menu button (top right) doesn't work at all. I purchased the CrackBar as well to test but it has the same problem so I deactivated it again. Any way to keep it closed? 2) I know you don't really support IE8, however the light grey NavBar shows the menu text as white, which is almost impossible to read in IE8. Any way around that? 3) When you enter a title for the NavBar menu (for display with mobile devices) it is showing up in IE8 on top of my menu in the full browser window on my desktop. It should only activate on mobile devices but for some reason it is activating in IE8 full width. Any work around for that? Thanks

Share this post


Link to post
Share on other sites
catrina

Do you have mobile optimization enabled? As for the IE8/light grey issue, I think you can try CSS to change the menu text color and see if that works.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
timlarner

By mobile optimization I assume you mean: Site options > Layout Editor and then the mobile optimization "Disable Mobile View" check box. This box is unchecked. In regards to the IE8 issue I couldn't track down the correct CSS to change. Going by Firebug I thought it would be in the pagelines-compiled-css file. The shadow is the only thing set to white #FFFFFF so I assumed that was it, but by changing that it still had no affect in IE8, staying as white text.

Share this post


Link to post
Share on other sites
timlarner

I'm one step closer. I discovered that some custom code I had added is causing the NavBar to be fully expanded. The following code was added as a fix from another Pagelines discussion to allow the dropdown menus to be shown in IE8. .metabar { display: none } div.nav-collapse.collapse{ height:auto !important; overflow:visible; } .nav-collapse{height:auto;} // IE8 Fix When I remove the code the NavBar goes back to normal and collapses like it should. However I need the code in as I need the dropdown menus to work in IE8. Any workarounds? Note: Removing the code doesn't fix the other two IE8 problems.

Share this post


Link to post
Share on other sites
timlarner

The code from Firebug indicated this css: .navbar.pl-color-grey .navline > li > a { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px 0 #FFFFFF; } I changed the text shadow to black (see below) and added the following to the Custom CSS in the Site options. .navbar.pl-color-grey .navline > li > a { text-shadow: 0 1px 0 #000000; } I can't directly access the pagelines-compiled-css file to change it there as the file doesn't show in my FTP, which is why I have opted to added it to the Custom Code.

Share this post


Link to post
Share on other sites
batman

You can try add in PageLines > Site Options > Custom Code > CSS Rules

.navbar.pl-color-grey .navline > li > a {text-shadow: 0px 1px 0px #000000;}

I hope this will be usefull


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
timlarner

Hi Batman The shadow changes in the modern browsers but in IE8 the text still stays white. It's black on the roll-over but white in its original state. I'm guessing there must be some other CSS at play. I have attached a screenshot to show you how it looks in IE8 with the white text, as well as the menu title shown (which it shouldn't be). menu_ie8.jpg

Share this post


Link to post
Share on other sites
Rob

Okay. Basic info: IE8 does not support shadowed text. That's a CSS3 element and IE8 predates and therefore does not include shadows. Please see: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp and look at the Browser Support reference. IE is crossed off. In fact IE9 doesn't support it either. Please also reference this forum posting: http://www.pagelines.com/forum/discussion/17308/older-browsers-support#Item_1 We do provide a plugin called Browser Specific CSS, http://www.pagelines.com/store/plugins/browser-css/ but I don't think this will force a browser to do something it's not programmed to do. It may, however, help with your mobile version issues.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
timlarner

Okay. Thanks. Looks like I have to stick with white text over an almost white background in IE8. Makes the website look pretty bad now in that browser (as the above picture shows), so I guess for future sites we build that need a grey NavBar we will have to use another companies theme that can allows just a little bit more basic support for that browser. In regards to the menu being stuck open fully expanded for mobile devices, I installed the Browser Specific CSS plugin but it had no affect. Should I assume again that in order to get the menu to close and working properly I would have to remove the custom IE8 drop-down code fix that the Pagelines Discussion forums suggested on an earlier occasion, and let all IE8 users have none of the drop-downs working? That fixes the problem but it also cancels out a large chunk of internet users who want to navigate on my site. There must be some basic work around here. This is the code that fixes the drop-down menu problem in IE8, but also keeps the menu fully expanded on mobile devices, which is what I don't want to happen. .metabar { display: none } div.nav-collapse.collapse{ height:auto !important; overflow:visible; } .nav-collapse{height:auto;} // IE8 Fix

Share this post


Link to post
Share on other sites
timlarner

I seem to have resolved Questions 1 and 2. 1) The menu fully expanded: I switched back to CrackBar and changed the theme to Black Transparent. I then removed the IE8 drop-down code from the Custom Code and it all still worked fine in IE8. There must be a fix in place for that version. 2) The white text in IE8: I switched the theme to Black Transparent which still sort-of matches my site design. This solves the problem of white text, seeing as it needs to be white in that theme. 3) The title for the Menu still shows up in IE8 on desktop browsers when it should only show on mobile devices. It would be good if there was a simple fix for this.

Share this post


Link to post
Share on other sites
Rob

Tim, just as a test, you might wish to try Dashboard > PageLines > Drag & Drop > Header and swap the NavBar or BrandNav with Nav Classic to see if it works better. In IE9, I don't see grey or white background items.


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

×