Bootstrap menu appears on desktop/laptop/iPad but not on iPhone

[annd71212172]

Hello,

I've created a site (www.svetcovlmft.com) that uses a bootstrap responsive menu.  The menu appears just fine on every device except an iPhone.  The menu doesn't appear on the iPhone, the background appears, but no menu items. Below is the code:

<header class="row">

    <nav class="navbar navbar-default navbar-fixed-top">

      <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="topFixedNavbar1">

          <ul class="nav navbar-nav">

            <li><a href="index.html">WELCOME</a></li>

            <li></li>

            <li><a href="about.html">ABOUT ME</a></li>

             <li class="dropdown"><a href="My Practice Individual.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MY PRACTICE<span class="caret"></span></a>

              <ul class="dropdown-menu">

                <li><a href="My Practice Individual.html">Individual Therapy</a></li>

                <li role="separator" class="divider"></li>

                    <li><a href="My Practice Couples.html">Couples Therapy</a></li>

           <li role="separator" class="divider"></li>

                <li><a href="My Practice Sex Therapy.html">Sex Therapy</a></li>

                <li role="separator" class="divider"></li>

           <li><a href="My Practice Sex TherapyCompulsive.html">Compulsive Sexual Behavior<br> &nbsp and Addiction </a></li>

                <li role="separator" class="divider"></li>

           <li><a href="My Practice Sex TherapyActingOur.html">Sexual Acting-Out (Adolescents) </a></li>

                <li role="separator" class="divider"></li>

             <!--  /   <li><a href="#">FAQ's</a></li> -->

              </ul>

            </li>

            <li class="dropdown"><a href="LetsGetStarted.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LET'S GET STARTED<span class="caret"></span></a>

              <ul class="dropdown-menu">

                <li><a href="LetsGetStartedExpect.html">What to Expect</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="rates.html">Rates and Insurance</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="Forms.html">Forms</a></li>

                <li role="separator" class="divider"></li>

             <!--  /   <li><a href="#">FAQ's</a></li> -->

              </ul>

            </li>

            <li data_temp_dwid="1"><a href="Contact Me.html" data_temp_dwid="2">CONTACT ME</a></li>

          </ul>

        </div>

        <!-- /.navbar-collapse -->

      </div>

Any advice would be appreciated!

[osgood_ · Accepted solution]

I think you will find that you have been editing the default bootstrap css file maybe by mistake and have corrupted the css styles.

Comment your stylesheet out using <!--     --> like below:

<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->

Then add the link to the CDN hosted bootstrap css file beneath it:::

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Then replace your <nav>  </nav> code for the code below:::

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li><a href="index.html">WELCOME</a></li>

<li><a href="about.html">ABOUT ME</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">MY PRACTICE<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="My Practice Individual.html">Individual Therapy</a></li>

<li role="separator" class="divider"></li>

<li><a href="My Practice Couples.html">Couples Therapy</a></li>

<li role="separator" class="divider"></li>

<li><a href="My Practice Sex Therapy.html">Sex Therapy</a></li>

<li role="separator" class="divider"></li>

<li><a href="My Practice Sex TherapyCompulsive.html">Compulsive Sexual Behavior<br> &nbsp and Addiction </a></li>

<li role="separator" class="divider"></li>

<li><a href="My Practice Sex TherapyActingOur.html">Sexual Acting-Out (Adolescents) </a></li>

</ul>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">LET'S GET STARTED<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="LetsGetStartedExpect.html">What to Expect</a></li>

<li role="separator" class="divider"></li>

<li><a href="rates.html">Rates and Insurance</a></li>

<li role="separator" class="divider"></li>

<li><a href="Forms.html">Forms</a></li>

<li role="separator" class="divider"></li>

</ul>

</li>

<li data_temp_dwid="1"><a href="Contact Me.html" data_temp_dwid="2">CONTACT ME</a></li>

</ul>

</div>

</div>

</nav>

Then add the below css styles to the end of your Svetcov.css file to style the navbar

.navbar {

border: 1px solid #ccc;

width: 97%;

margin: 0 auto;

background-color: #fff;

padding: 10px 0;

box-shadow: 3px 3px 3px #999;

}

.nav.navbar-nav li a {

font-size: 20px;

color: #000;

font-family: "malgun gothic";

}

.nav.navbar-nav li a:hover {

color: #999;

}

[annd71212172]

Thank you so much for your help! This fixed the problem!! 

[osgood_]

annd71212172  wrote

Thank you so much for your help! This fixed the problem!! 

No problem, you're welcome. You never want to edit the default bootstrap.css file as its hugley complicated. I suspect you may have had a look around in it and may have altered a few styles before wisely linking your own css file to the page in which to make changes and overide the default Bootstrap css styles.