This example does not seem to correctly resize depending on screen size.

I am referencing Bootstrap 3.3.7 and jQuery 3.3.1 and have attempted to provide the correct font size, etc. to correctly display the navbar items on a mobile device as well as my desktop.  However, when the screen size becomes small the dropdowns lose the shadow box and all perspective.

Need to understand where my css is not working as expected.   Also I should note that only the Monday  and Events itemized produce results.  All other items are there for example only.
Dave McConnellRetiredAsked:
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.

Shaun VermaakTechnical Specialist/DeveloperCommented:
Please post address/code
0
An Average Forum Participant Just For FunHardware Tester and DebuggerCommented:
Hi! You did not attach any example code so there is only so much we can do based on our assumptions.

For starters, You should always start from a template, e.g. the "Basic template" (http://getbootstrap.com/getting-started/#template). This works as intended:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body style="font-size:14px">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Open in new window

0
Dave McConnellRetiredAuthor Commented:
I had attached a file with all the code, apparently it did not appear, so here is the complete code...


<!DOCTYPE html>
<html lang="en">
	<head>
	  <title>Bootstrap Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<style type="text/css">
			body {
				margin: 0;
				font-family: Arial, Helvetica, sans-serif;
				background: url(images/SandyBackground.jpg) repeat;
			}

			.navbar{
				background: url(images/SandyBackground.jpg) repeat;
				border: 0;
			}

			@media screen and (max-width: 2400px) {
				body {
					font-size: 2vw;
					color: black;
				}
			}

			@media screen and (max-width: 900px) {
				body {
					font-size: 1.8vw;
					color: black;
				}
			}

			svg text {
			   font-family: FontAwesome;
			}

			.icon::before {
				display: inline-block;
				margin-right: .5em;
				font: normal normal normal 14px/1 FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				transform: translate(0, 0);
			}

			td {
				padding:0 5px 0 5px;
			}


			.dropbtn {
			    background-color: #3498DB;
			    color: white;
			    padding: 16px;
			    font-size: 16px;
			    border: none;
			    cursor: pointer;
			}

			.dropbtn:hover, .dropbtn:focus {
			    background-color: #2980B9;
			}

			.dropdown {
			    background-color: #bddbef;
			    color: black;
			    padding: 4px;
			    font-size: 13px;
			    border: none;
			    cursor: pointer;
			}

			.dropdown-menu {
			    display: none;
				 font-size: 12px;
			    position: absolute;
			    background-color: #f1f1f1;
			    min-width: 180px;
			    overflow: auto;
			    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			    z-index: 1;
			}

			.dropdown-menu li {
				 font-size: 10px;
			}

			.dropdown-content a {
			    color: #080e66;
				 background-color: #e1ecf4;
			    padding: 4px 3px;
			    text-decoration: none;
				 font-size: 3px;
			    display: block;
			}

			.dropdown a:hover {background-color: #ddd}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-default">
		   <div class="container-fluid">
		      <div class="row justify-content-start">
		         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
		            <img src="images/HeaderImage.jpg" class="img-responsive">
		         </div>
		      </div>
		      <div class="row justify-content-center">
		         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
		            <H4><Strong>Need Help?</Strong>&nbsp;&nbsp;&nbsp;928-458-7488</H4>
		         </div>
		      </div>
		      <div class="row">
		         <ul class="nav navbar-nav">
		            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
		               <li class="dropdown">
		                  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span onclick="CloseAll();" >Meetings</span><span class="caret"></span></a>
		                  <ul class="dropdown-menu">
		                     <li><a href="#" onclick="toggleAllMeetings();">All Meetings w/Legend</a></li>
		                     <li><a href="#" onclick="toggleMonMeetings();">Monday</a></li>
		                     <li><a href="#" onclick="toggleTueMeetings();">Tuesday</a></li>
		                     <li><a href="#" onclick="toggleWedMeetings();">Wednesday</a></li>
		                     <li><a href="#" onclick="toggleThuMeetings();">Thursday</a></li>
		                     <li><a href="#" onclick="toggleFriMeetings();">Friday</a></li>
		                     <li><a href="#" onclick="toggleSatMeetings();">Saturday</a></li>
		                     <li><a href="#" onclick="toggleSunMeetings();">Sunday</a></li>
		                     <li><a onclick="toggleCommitteeMeetings();" href="#">Committee Meetings</a></li>
		                     <li><a target="_blank" onclick="CloseAll();" href="Files/2018-04-17-Spring-Meeting-List.pdf">Download Meeting List</a></li>
		                  </ul>
		               </li>
		            </div>
		            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
		               <li class="dropdown"><a href="#Events" onclick="toggleLocalEvents();">Events</a></li>
		            </div>
		            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
		               <li class="dropdown">
		                  <a class="dropdown-toggle" onclick="CloseAll();" data-toggle="dropdown" href="#">Documents<span class="caret"></span></a>
		                  <ul class="dropdown-menu">
		                     <li><a target="_blank" href="Files/2017-11-06_YASC_Group_Order_Form.pdf">Group Order Form</a></li>
		                     <li><a target="_blank" href="Files/Treasurer-Group-Report-Form.pdf">Group Treasurer's Form</a></li>
		                     <li><a target="_blank" href="Files/Yavapai_Area_Service_Guidelines_Revised_December_2016.pdf">Yavapai Area Service Guidelines</a></li>
		                  </ul>
		               </li>
		            </div>
		            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
		               <li class="dropdown">
		                  <a class="dropdown-toggle" onclick="CloseAll();" data-toggle="dropdown" href="#">Other Links<span class="caret"></span></a>
		                  <ul class="dropdown-menu">
		                     <li><A target="_blank" href="http://www.arizona-na.org/">Arizona Region</a></li>
		                     <li><A target="_blank" href="http://www.vvana.info/">Verde Valley Area</a></li>
		                     <li><A target="_blank" href="http://na.org/">World Services</a></li>
		                  </ul>
		               </li>
		            </div>
		         </ul>
		      </div>
		      <div id="MonMeetingsContent" style="display:none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		         <table cellpadding="3" cellspacing="3" width="100%">
		            <col style="width:9%">
		            <col style="width:9%">
		            <col style="width:30%">
		            <col style="width:35%">
		            <col style="width:13%">
		            <thead>
		               <tr>
		                  <th>MONDAY</th>
		                  <th>Time</th>
		                  <th>Description</th>
		                  <th>Where</th>
		                  <th>Map Link</th>
		               </tr>
		            </thead>
		            <tbody>
		               <tr height="2" bgcolor="#222222">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BDBDBD" id="Font75">
		                  <td style="text-align:left"><B>MON</B></td>
		                  <td style="text-align:left">5:30p</td>
		                  <td style="text-align:left">A NEW LIGHT (D H JFT O     No Children Allowed)</td>
		                  <td style="text-align:left">Step One Coffee House, 6719 E. 2nd Street, Suite A,  Prescott Valley</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.579271,-112.348131">MAP</a></td>
		               </tr>
		               <tr bgcolor="#DEDEDE" id="Font75">
		                  <td >  </td>
		                  <td style="text-align:left">7:00p</td>
		                  <td style="text-align:left">LOST AND FOUND (D LC O)</td>
		                  <td style="text-align:left">Safe Harbor, 520 Delano St.,  Prescott</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.572087,-112.471348">MAP</a></td>
		               </tr>
		               <tr height="4" bgcolor="#000000">
		                  <td colspan="5">  </td>
		               </tr>
		            </tbody>
		         </table>
		      </div>
		      <div id="LocalEventsContent" style="display:none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
		         <table cellpadding="3" cellspacing="3" width="100%">
		            <col style="width:9%">
		            <col style="width:9%">
		            <col style="width:35%">
		            <col style="width:35%">
		            <col style="width:8%">
		            <thead>
		               <tr>
		                  <th>Month</th>
		                  <th>Date</th>
		                  <th>What</th>
		                  <th>Where</th>
		                  <th>Link</th>
		               </tr>
		            </thead>
		            <tbody>
		               <tr height="6" bgcolor="#000000">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BCBCBC">
		                  <td style="text-align:left"><b>MAY</b></td>
		                  <td style="text-align:left">10<sup>th</sup></td>
		                  <td style="text-align:left">23<SUP>rd</sup> Sedona Campout&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-05-10-SedonaCampout.jpg">Flyer</A>)</td>
		                  <td style="text-align:left">Chavez Crossing Campground, Highway 179, Sedona</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.842801, -111.777335">MAP</a></td>
		               </tr>
		               <tr bgcolor="#DEDEDE">
		                  <td >  </td>
		                  <td style="text-align:left">19<sup>th</sup></td>
		                  <td style="text-align:left">NACONA Chili Cook Off (Fundraiser)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-05-19-NACONA-Chili-Cook-Off.jpg">Flyer</A>)</td>
		                  <td style="text-align:left">755 N Bonito St, Flagstaff, AZ</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=35.207085, -111.652794">MAP</a></td>
		               </tr>
		               <tr bgcolor="#CDCDCD">
		                  <td >  </td>
		                  <td style="text-align:left">25<sup>th</sup></td>
		                  <td style="text-align:left">32<sup>nd</sup> Annual Arizona Regional Convention of NA (ARCNA)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-05-25-ARCNA.pdf">Flyer/Registration</A>)</td>
		                  <td style="text-align:left">DoubleTree Resort, 5401 N. Scottsdale Rd., Scottsdale</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=33.515706, -111.925373">MAP</a></td>
		               </tr>
		               <tr height="2" bgcolor="#222222">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BCBCBC">
		                  <td style="text-align:left"><b>JUN</b></td>
		                  <td style="text-align:left">8<sup>th</sup></td>
		                  <td style="text-align:left">15<sup>th</sup> Annual Californai Mid-State Regional Convention of NA (CMSRCNA)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-06-08-CMSRCNA.pdf">Flyer/Registration</A>)</td>
		                  <td style="text-align:left">University Plaza Waterfront, Stockton, CA</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=37.956872, -121.294720">MAP</a></td>
		               </tr>
		               <tr bgcolor="#DEDEDE">
		                  <td >  </td>
		                  <td style="text-align:left">28<sup>th</sup></td>
		                  <td style="text-align:left">Festival of Recovery 2018&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-06-28-Festival-of-Recovery.pdf">Flyer/Registration</A>)</td>
		                  <td style="text-align:left">Show Low Lake Campground, Lakeside, AZ</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.195263, -110.007148">MAP</a></td>
		               </tr>
		               <tr bgcolor="#CDCDCD">
		                  <td >  </td>
		                  <td style="text-align:left">29<sup>th</sup></td>
		                  <td style="text-align:left">20<sup>th</sup> Annual Californai Inland Regional Convention of NA (CIRCNA)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-06-29-CIRCNA.pdf">Flyer/Registration</A>)</td>
		                  <td style="text-align:left">JW Marriot, Palm Desert, CA</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=33.754768, -116.361188">MAP</a></td>
		               </tr>
		               <tr height="2" bgcolor="#222222">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BCBCBC">
		                  <td style="text-align:left"><b>AUG</b></td>
		                  <td style="text-align:left">17<sup>th</sup></td>
		                  <td style="text-align:left">Mount Lemmon Bash</td>
		                  <td colspan="2" style="text-align:left">More Information to Come</td>
		               </tr>
		               <tr bgcolor="#DEDEDE">
		                  <td >  </td>
		                  <td style="text-align:left">30<sup>th</sup></td>
		                  <td style="text-align:left">37<sup>th</sup> Annual World Convention of Narcotics Anonymous (WCNA)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-08-30-WCNA.pdf">Registration</A>)</td>
		                  <td style="text-align:left">Orlando, FL</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=28.424486, -81.469157">MAP</a></td>
		               </tr>
		               <tr height="2" bgcolor="#222222">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BCBCBC">
		                  <td style="text-align:left"><b>SEP</b></td>
		                  <td style="text-align:left">14<sup>th</sup></td>
		                  <td style="text-align:left">Yavapai/Verde Valley Unity Campout&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-09-14-Unity-Campout.pdf">Flyer</A>)</td>
		                  <td style="text-align:left">Mingus Mountain, AZ</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.698188, -112.136570">MAP</a></td>
		               </tr>
		               <tr bgcolor="#DEDEDE">
		                  <td >  </td>
		                  <td style="text-align:left">28<sup>th</sup></td>
		                  <td style="text-align:left">4<sup>th</sup> Annual SouthEastern Arizona Area of NA Convention(SEAZNAC)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Flyer is coming</td>
		                  <td style="text-align:left">Windemere Hotel, Sierra Vista, AZ</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=31.531447, -110.256572">MAP</a></td>
		               </tr>
		               <tr height="2" bgcolor="#222222">
		                  <td colspan="5">  </td>
		               </tr>
		               <tr bgcolor="#BCBCBC">
		                  <td style="text-align:left"><b>OCT</b></td>
		                  <td style="text-align:left">26<sup>th</sup></td>
		                  <td style="text-align:left">32<sup>nd</sup> Western Service Learning Days (WSLDXXXII)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<A target="_blank" href="Files/2018-10-26-Western-Service-Learning-Days.pdf">Flyer/Registration</A>)</td>
		                  <td style="text-align:left">Sheraton Crescent Hotel, 2620 W Dunlap Ave, Phoenix</td>
		                  <td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=33.568415, -112.115618">MAP</a></td>
		               </tr>
		               <tr height="6" bgcolor="#000000">
		                  <td colspan="5">  </td>
		               </tr>
		            </tbody>
		         </table>
		      </div>
		   </div>
		</nav>
		<script>
			function toggleMonMeetings() {
			  if (MonMeetingsContent.style.display == 'block')
				    MonMeetingsContent.style.display = 'none';
				   else
				    MonMeetingsContent.style.display = 'block';

				   if (LocalEventsContent.style.display == 'block')
				    LocalEventsContent.style.display = 'none';
			}

			function toggleLocalEvents() {
			  if (LocalEventsContent.style.display == 'block')
				    LocalEventsContent.style.display = 'none';
				   else
				    LocalEventsContent.style.display = 'block';

				   if (MonMeetingsContent.style.display == 'block')
				    MonMeetingsContent.style.display = 'none';
			}

			function CloseAll() {
				   if (MonMeetingsContent.style.display == 'block')
				    MonMeetingsContent.style.display = 'none';

				   if (LocalEventsContent.style.display == 'block')
				    LocalEventsContent.style.display = 'none';
			}
		</script>
	</body>
</html>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
You are putting your navs in col-xs-3
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">

Open in new window

At smaller screen sizes your content is going to overflow as the columns are simply to small to accommodate them.

The question is - what were you expecting to see at smaller sizes?
0
Dave McConnellRetiredAuthor Commented:
First off, I was hoping to have less spacing between menu items so that 4 x 3 would end up being 12 on a smaller device e.g., phone.  Then have the dropdown items align under the title.   I am going to draw up what I am going for and send that along.  

The main reason I am asking for help is to better understand how to manipulate the css to adjust the look and feel of the bootstrap navbar.  Everything I seem to try only makes it worse.   If for some reason you are unable to see the image, please go to http://prntscr.com/jevl0g

Example of what I would like to see on the phone
0
Julian HansenCommented:
What if the screen is simply not wide enough to accommodate that configuration? If you shrink the text to make it fit - you lose legibility.

The usual approach with mobile is to stack columns into a single row layout (col-xs-12) - but that won't work for a Nav - which is why standard practice on a Mobile is to have the Nav collapse to a Hamburger menu.
0

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
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.