Archived

This topic is now archived and is closed to further replies.

  • 0

Issues while trying to change width to collapse navbar


Question

Posted · Report post

Hello,

 

I am trying to change the trigger for collapsing the navbar (fixed) and followed the instructions on this thread:

http://www.pagelines.com/forum/topic/26261-change-responsive-trigger-width-of-navbar/?hl=navbar

 

I changed the two 767px values to 1000px, and pasted the relevant (I think) CSS into my custom CSS field. Here is the CSS I altered and pasted:

http://paste.pagelines.com/11u

 

However, as the width gets minimized the entire dropdown menu is displayed for a period of time, and then as the width gets further reduced the dropdown menu does disappear as expected, as can be seen here:

http://hibbittsdesign.com/courses/cmpt-363-133-prototype/

 

I would greatly appreciate any suggestions on how I can fix this.

 

Thanks very much,

Paul

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Hi Rob,

 

Sorry about that - I followed your instructions to reinstall the cache plugin (which was W3 Total Cache), cleared all caches, and then deactivated the plugin.

 

Still no change in the unexpected behaviour so far.

 

Thanks,

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Paul, that's okay, but at least now we know nothing's locked into the cache.

Share this post


Link to post
Share on other sites

Posted · Report post

Paul, do you have a cache plugin (active or not)?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

Thanks for the follow-up. Yes, I had a deactivated cache plugin which I now completely removed but still no luck :-(

 

Any other thoughts? The earlier CSS tweak suggested by James partially solved the issue, but the text of the dropdown menu was still visible.

 

Thanks,

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

For the gap inbetween the two instructions try the below, this seems to work in firebug to hide the drop down in between the two widths.

 

#site .navbar .nav-collapse {
    height0;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

Thanks for the help. I added your CSS right after the last @media code but it did not seem to change anything.

 

I then added !important; and now the menu background hides as expected but the white text of the menu items (look carefully) still is visible, which can be seen at http://hibbittsdesign.com/courses/cmpt-363-133-prototype/

 

Do I need to put the CSS somewhere else, or add something to also hide the text?

 

Thanks very much,

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Ok I've tested this by recreating your setup and that menu should stay hidden regardless until the menu is clicked, so it doesn't seem to be an issue with the css, so remove the previous code I gave you so the black background comes back so you can test. It looks like there's a js error which is causing it to stay present on the screen. Something from olark.com?

 

http://screencast.com/t/mCFvfIDYQ

 

Try deactivating your plugins, then test the menu again by resizing the screen, do you see the menu and does the drop down button the top left retract it when clicked?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

I use olark for the chat box on the site - I removed the html code I was including in a hook, and I removed your earlier code, but I still have the menu contents appearing when I narrow the Browser window (and view on an iPad, etc.).

 

I've also tried to disable all the plugins, except for the PageLines ones, and still get that unexpected full display of the dropdown menu :-(

 

Any other ideas?

 

Thanks very much,

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Paul,

 

I didn't ask you to remove the cache plugin. Please don't move faster than we do.  If a cache plugin was activated, it's very likely the cache file is still functioning, even if you've completely deleted the plugin. My recommendation was going to be to clear the cache within the cache plugin's settings.  By deleting the cache plugin, you may well have locked the cache file in place.

 

Reinstall the cache plugin.  Clear the cache and then deactivate but do not delete.

Share this post


Link to post
Share on other sites