Skip to main content
A
annd71212172
Participant
September 26, 2017
Answered

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

  • September 26, 2017
  • 1 reply
  • 3013 views

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!

This topic has been closed for replies.
Correct answer osgood_

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;

}

1 reply

O
osgood_Correct answer
Legend
September 26, 2017

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;

}

    A
    annd71212172Author
    Participant
    September 26, 2017

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

    O
    osgood_
    Legend
    September 26, 2017

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices