Bootstrap Menu Issue

Please look at http://rainrich.com/scheduling/bs_page.htm on a desktop or laptop. This is EXACTLY the way I'm trying to make it look

Then please look at the same thing on an iphone.

Note that on the iphone, the menu has adjusted to a vertical menu & there is no image.

Why?
bs-page.htm
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Make sure to look at the examples.  I find it easiest when I am in trouble like this to copy the example and fill in with my own code.  You didn't have the hamburger bar and missing the class, "collapse navbar-collapse" in id "bs-example-navbar-collapse-1" and lastly changed "navbar-fixed-top" to "navbar-static-top"

   


http://jsbin.com/cakaca/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>


  <nav class="navbar navbar-default navbar-static-top" style="background-color: #74A516;">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="color: white; font-weight: bold;">RainRich</a>
    </div>
    
     <!-- Collect the nav links, forms, and other content for toggling -->
    
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#" style="color: white; font-weight: bold;">Home</a></li>
        <li><a href="#" style="color: white; font-weight: bold;">Services</a></li>
        <li><a href="#" style="color: white; font-weight: bold;">About Us</a></li>
        <li><a href="#" style="color: white; font-weight: bold;">Articles</a></li>
		<li><a href="#" style="color: white; font-weight: bold;">Online Payment</a></li>
		<li><a href="#" style="color: white; font-weight: bold;">Contact Us</a></li>
		<li><a href="#" style="color: white; font-weight: bold;">Schedule Appointment</a></li>
      </ul>
    </div>
  </div>
</nav>
<div><img class="img-responsive" src="images/top_images.jpg"></div>

</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
Following on from this http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28679134.html and http://jsbin.com/honiza/1/edit?html,output, the example I gave there was a horizontal menu.  It has to collapse to a vertical menu on mobile as there just isn't the screen width to show a horizontal menu unless it moves onto multiple rows (as I showed you previously that could be done but it would take up most of the screen with the menu)

Take note of what Scott has said as well, it's not just me telling you.  He's been one of the top experts in this area for a long time.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Scott Fell

I thought I responded but my response isn't there.

What you did looks GREAT except that I'd likw the image butted up against the bottom of the menu bar; I don;t need that blank space & I couldn' see a way to get rid of it.

Thanks!
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RobOwner (Aidellio)Commented:
Richard,

Out of curiosity, how is what Scott has given you any different to what I showed you in the previous question?  When you view it on mobile, the menu collapses to a vertical list.

Cheers,

Rob
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob Jurd,

Scott's DOES NOT collapse into a vertical list.

I obviously realize that viewing the menu items vertically of the phone is MUCH better from a readability viewpoint, but the customer would come unglued if they saw that; they would think it's totally different.

I am probably going to suggest to them that for that page, because of the readability difficulties, we just have a "Home" menu in larger font; from home, the site visitor can go anywhere else
RobOwner (Aidellio)Commented:
Sure, I understand where you're coming from and with what the customer is wanting.  

Do they realise their clients will be expecting something different i.e. a menu that collapses?  If they do then that's their choice and I'll respect that.

Because the viewport is not there, from my understanding you are still going to run into the same issues you had with the font size for the rest of the page?
RobOwner (Aidellio)Commented:
And Scott's example WILL collapse if the screen resolution is below 768px regardless of the viewport.  See Scott's jsbin http://jsbin.com/cakaca/1/edit?html,output and resize the window to see what i mean.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I have a version where I have eliminated the image map & have images with no size specified, it looks good to me on my iphone.

This was supposed to be a small sub-project of a few hours, as in many cases, it has turned into a nightmare.

I think what Ray Paseur said would really be the best way to go; design the smart phone version FIRST, then the others are easy.

As I think I said I have been meaning to learn Bootstrap anyway, it's not easy to get into a project like this, essentially, backwards, but that's where I'm at.

Thanks for all your assistance. I hope the pints I awarded on the earlier questions help.
RobOwner (Aidellio)Commented:
That sounds promising and glad it's looking good on your iphone.  It's unfortunate it's turned out to be such a nightmare for you but at hopefully you're more the wiser now.  Ray is right that you design for mobile first, especially these days when everyone uses their phones and tablets.

You're right that it is hard to make a non-responsive site, responsive and it's more often than not, just easier to start again.

And yes, thank you for the points.  They do help as it shows that you appreciate the experts help.  As for this question, I think Scott deserves them for showing you how the menu can be done without the viewport.

My apologies if I come across the wrong way, I'm only trying to show you the caveats of working backwards and the potential issues you may face.  As long as you're aware of them as I wouldn't want you to be caught out down the track.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You need to reset the navbar class to margin-bottom: 0px.  I would do this in a separate stylesheet as it overwrite bootstrap's css and load your custom stylesheet after the bs css.

 .navbar {
 
  margin-bottom: 0px;
 
}

Open in new window


http://jsbin.com/cakaca/2/edit
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I missed out on all the good conversation.    

If you are just trying to show and hide things you can do it without the nav.  Just use the utilities http://getbootstrap.com/css/#responsive-utilities where you can show or  hide blocks of content based on the viewport being xs, sm, md or lg.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob is referring to previous questions we participated.

For both of you, it seems hard for me to believe that people are filling out forms like the one on that page on the phone; even with the larger font, it's VERY difficult to type into, select an option from a pulldown, etc.

Scott, you may not have seen the form, but if you go to rainrich.com/scheduling/index_ct.php on either a computer or a tablet, you will see the form.

But I know a lot of people live on their phones (my daughter being one), do I guess they get used to it.
RobOwner (Aidellio)Commented:
As I'm sure Scott would say, that's where bootstrap is so versatile. If you build for mobile first you just don't run into those kind of issues.  It does forms really well but it's fundamentally about how the elements are laid out based on the screen width of the device you are viewing it on.
You need the viewport meta tag if you want your site truly responsive. You don't have to have the menu collapse but you do need to decide how you want it to look.
The issue here, and you said it yourself, you're working backwards.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The idea of responsive is to make the content right in different situations.  That may mean hiding or moving things for mobile or having multiple columns on desktop but single rows for mobile.   I personally like bootstrap because I am just used to it, but their site is really not the best to learn from.   An alternative is http://foundation.zurb.com.  This is probably like comparing vhs/beta for those of us old enough to remember.  I tried both a while back and stuck with bootstrap for the main reason more people were using it making other 3rd party integrations easier. But there is a ton of good leaning information on the zurb site.  

It will also help a lot to make some sample screens with either power point, google docs/presentation or a napkin.  What should the form and content look like on a phone vs desktop?  It is much easier to program out when you have something to shoot for rather than trial and error.

Good luck!
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Thanks both for these responses.

I had already signed up with Lynda.com to take an online class on Bootstrap. I looked at the online Tutorial Bootstrap has & it's useful but there are Soooooooo many classes, it's really hard to digest. They (like most of these things) give the really simple examples, which I look at and say "that's cool" but doing more complex things is harders

Thanks, & look out for my future css / Bootstrap questions.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just using it is the best thing.   If you can only get your head around how columns work, you have 90% of what you will use on a regular basis.  

<div class="row">
     <div class="col-md-3 col-sm 6">4 columns for medium, 2 columns for small screen and 1 row for xs or mobile</div>

     <div class="col-md-3 col-sm 6">4 columns for medium, 2 columns for small screen and 1 row for xs or mobile</div>

     <div class="col-md-3 col-sm 6">4 columns for medium, 2 columns for small screen and 1 row for xs or mobile</div>

     <div class="col-md-3 col-sm 6">4 columns for medium, 2 columns for small screen and 1 row for xs or mobile</div>

</div>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.