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.
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.
Shaun Vermaak
Please post address/code
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:
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>ASKER
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> 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 (<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) (<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) (<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) (<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 (<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) (<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) (<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 (<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) 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) (<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>
You are putting your navs in col-xs-3
The question is - what were you expecting to see at smaller sizes?
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">The question is - what were you expecting to see at smaller sizes?
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.