How JustAnswer Works:

  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.

Ask George Sibiya Your Own Question

George Sibiya
George Sibiya,
Category: Programming
Satisfied Customers: 63
Experience:  Research Scientist at CSIR
94470076
Type Your Programming Question Here...
George Sibiya is online now
A new question is answered every 9 seconds

Re. Bootstrap. I have a menu contained in a sidebar. I need

Customer Question

Re. Bootstrap.
JA: How long has this been going on?
Customer: I have a menu contained in a sidebar. I need it to collapse when everything transforms into a single column when the screen size reaches 768px. It needs to be substituted by a button which the user presses to reveal the menu. The code I have found applies to the standard horizontal menu, and I can't get it to work with this vertical menu in a sidebar. Thanks.
JA: What troubleshooting have you tried?
Customer: I can produce a button with a collapsable menu, but it is the same no matter what the screen size is.
JA: The programmer can solve this for you. Anything else you want him to know before I connect you two?
Customer: No, I've managed to sort out everything else. Thanks
Submitted: 6 months ago.
Category: Programming
Expert:  Bhavik Joshi replied 6 months ago.

Hi, I'm Bhavik. Welcome to JustAnswer. I'm reviewing your question now, and will reply back ASAP.

Expert:  Bhavik Joshi replied 6 months ago.

Please share your code with me, I will try my best to help you in it.

Customer: replied 6 months ago.
Hi, I am just building my new site in Bootstrap and can do everything I want except get the menu right. On large screens I would like the full menu in the side bar, with the decoration you can see, and with no button visible. Below a screen width of 768px when it collapses to 1 column, I would like just the button to be visible, but for the same menu to drop down when the button is clicked. I have enclosed my current version of the index file, which just shows a button at all times, and the amendments I have added to the standard bootstrap.css. There were no changes to the standard bootstrap.js file.
Expert:  Bhavik Joshi replied 6 months ago.

I tried but not luck.. I am opting out so that other expert can help you in it.

Expert:  George Sibiya replied 6 months ago.

Hi,

My name is George.

I will also try it out and give feedback.

Regards,

George

Expert:  George Sibiya replied 6 months ago.

Hi,

What version of boostrap are you using? I am testing with version 3.3.7 from http://getbootstrap.com/getting-started/#download

Regards,

G

Customer: replied 6 months ago.
George, I have been using version 3.3.7, and the already compiled css, Ken
Expert:  George Sibiya replied 6 months ago.

Ok great. I just need to test it on a small screen now

Expert:  George Sibiya replied 6 months ago.

Hi,

Including these classes in your ul tag with the menus does hide the menu when the screen gets smaller

class="navnav-list hidden-md hidden-sm hidden-xs"

When you clink the button however the menu does not appear as expected.

I am investigating other solutions as having data-toggle="modal" in the button tag did not work. You may test it however as I have not tested it on a variety of devices.

Regards,

G

Customer: replied 6 months ago.
George,I test different screen sizes using a Google Chrome plug-in. The version of 'index' I sent you shows just the menu button at all screen sizes, and the menu drops down when the button is clicked. I see no difference when 'hidden' classes are added to the ul tag.data-toggle="modal" does not work.Bootstrap appears to have many 'nav' commands, and I suspect that one of these will do what I want, but I don't know where to find a full list of them, along with their attributes.Regards, Ken
Expert:  George Sibiya replied 6 months ago.

Hi Ken,

I have tested by shrinking the width of the Google Chrome window I'll also try the plugin.

I have also realised that modal is not that different from collapse except that the menu displays as a popup.

You are right bootstrap should have the class/command we want I'll also help figure out.

Regards,

G

Expert:  George Sibiya replied 6 months ago.

My index page that hides the menu but fails to display after button click is here https://dl.dropboxusercontent.com/u/21712482/index.html

Customer: replied 6 months ago.
George, thanks for your continuing efforts, Ken
Expert:  George Sibiya replied 6 months ago.

Hi Ken,

Please download this index file https://dl.dropboxusercontent.com/u/21712482/index.html

And test to verify if thats how you want your menus to behave.

I have tested with "Resize Window" plugin in Chrome.

Regards,

G

Customer: replied 6 months ago.
George,What I see is a menu button, with the menu list below it twice. This is the same at all screen sizes. So, this is not what I am looking for.What I need is the menu list with no button visible at larger screen sizes, just like my current static site - http://www.omnagen.com Below 768px, I would like just the menu button visible, and clicking on it then reveals the full menu.Regards, Ken
Expert:  George Sibiya replied 6 months ago.

Ok cool, I'll rework it and send the entire HTML5 project that I am testing it on.

Expert:  George Sibiya replied 6 months ago.

Hi Ken,

Please download the project from https://dl.dropboxusercontent.com/u/21712482/JAClient.zip

Changes that I have made are indicated with comments in the index file and bootstrap. To control the behaviour I have just played around with bootstrap's hidden-* classes in the functions inside js/navbarcontrol.js . I was able to obtain the views as seen in the attached images.

You can run the project by importing it in Netbeans with an HTML5 plugin installed.

Please do tell me if it is not behaving as expected and remember to reload the page every time you change the browser screen size while testing.

Regards,

G

Customer: replied 6 months ago.
George,Thanks, I'm not going to have time to look at this until tomorrow afternoon.Regards, Ken
Expert:  George Sibiya replied 6 months ago.

Ok, chat to you then.

Customer: replied 6 months ago.
George,Certainly making progress.Index
As I want the menu to stay in a particular position within a column on the the web page, I don't think this will work. The menu also overlaps with the page at intermediate screen sizes, which is not good.Index_1
This is probably the way forward. I like that only the menu is visible at large screen sizes, and only the button at small sizes. But the menu covers the full screen width and is in a grey box, which I don't want. I would like it in a finite colored box.I would also like the break between full menu and button to be at 768px, and at the moment it is at around 1024px, but I guess this can be sorted easily by the 'hidden' and visible' classes.However, when I copy the code into my site, only the button is visible at all screen sizes. A .doc file is enclosed with my code. I have probably made a silly mistake somewhere.Regards, Ken
Expert:  George Sibiya replied 6 months ago.

Ok, thank you so much for the feedback. I'll work on you full index and send it back.

Customer: replied 6 months ago.
George,I have sorted it out for myself, as I need to get on with it.Thanks and regards, Ken