Jump to content
paulhibbitts

Issues while trying to change width to collapse navbar

Recommended Posts

paulhibbitts    2
paulhibbitts

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
paulhibbitts    2
paulhibbitts

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
James B    436
James B

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?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
paulhibbitts    2
paulhibbitts

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
paulhibbitts    2
paulhibbitts

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
paulhibbitts    2
paulhibbitts

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
Rob    547
Rob

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


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


  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×