WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > problems with bootstrap navbar collapse

Reply
  Thread Tools Display Modes
Old 9th November 17, 06:24 AM   #1
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 85
Default problems with bootstrap navbar collapse

I am having major problems with this site. thought I was doing everything right but nothing is working for me. when I collapse the site to tablet/phone the menu disappears on me. I am once again banging my head against the wall on this.

I don't have a live version but where is what I have.

HTML Code:
<!doctype html>
<html lang="en">
<head>
				<title>Premier Memorial</title>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
				<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
				<link rel="stylesheet" href="css/main-org.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
 <!-- Latest compiled and minified JavaScript:Bootstrap 3 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>
<body>
				<div class="header">
								<nav class="navbar navbar-default" role="navigation">
												<div class="navbar-header">
																<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-brand-centered">
																				<span class="sr-only">Toggle navigation</span>
																				<span class="icon-bar"></span>
																				<span class="icon-bar"></span>
																				<span class="icon-bar"></span>
																</button>
																<div class="navbar-brand navbar-brand-centered">
																				<div class="logo"></div>
																</div>
												</div>
												<div class="collapse navbar-collapse" id="navbar-brand-centered">
																<ul class="nav navbar-nav" id="nav-left">
																				<li><a href="index.html">Home</a></li>
																				<li></li>
																				<li><a href="types.html">Types of Memorials</a></li>
																				<li><a href="granite-design.html">Granite Colors & Designs</a></li>
																</ul>
																<ul class="nav navbar-nav navbar-right" id="nav-right">
																				<li><a href="gallery.html">Gallery</a></li>
																				<li><a href="who.html">Who We Are</a></li>
																				<li><a href="contact.html">Contact</a></li>
																				<li><a href="http://131.191.87.12/">Partner Sign-In</a></li>
																</ul>
												</div>
								</nav>
				</div>
				<div class="container" id="main">
								<div class="col-sm-1">
								</div>
								<div class="col-sm-10" id="">
												<h2>Remember their journey.</h2>
												<p>Premier Memorial is a leading wholesale supplier of cemetery and public monuments. We offer the widest range of products and services available to the monument industry today. Our products include standard and custom designed upright monuments, grass markers, slants and bevel, benches, columbarium’s, and mausoleums. We design, fabricate and install personalized monuments in granite and bronze by translating your ideas into the memorial you will be proud of for years to come.</p>
												<p>We provided the most comprehensive sales support material available in the industry, custom design services and customer support. We partner with our retail locations to present the full range of products and services available</p>
												<h3>Need Help with a Rural Cemetery?</h3>
												<div class="rural">
																<a href="http://www.premiermonuments.com/">Click Here</a>
												</div>
								</div>
								<div class="col-sm-1">
								</div>
				</div>
				<footer>
								<div class="foot1">
												<div class="foot2">
																<ul>
																				<li><a href="index.html">Home</a></li>
																				<li><a href="types.html">Types of Memorials</a></li>
																				<li><a href="granite-design.html">Granite Colors & Designs</a></li>
																				<li><a href="gallery.html">Gallery</a></li>
																				<li><a href="who.html">Who We Are</a></li>
																				<li><a href="contact.html">Contact</a></li>
																				<li><a href="http://131.191.87.12/">Partner Sign-In</a></li>
																</ul>
                <p>© 2017 Premier Memorial. All rights reserved.
                </br>2309 South Tacoma Way
                </br>Tacoma, WA 98409
                </br>(800) 426-5973 | (253) 472-0369</p>
												</div>
								</div>   
					</footer>
</body>
</html>
Code:
body {
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
}
@font-face {
				font-family: garamond-italic;
				src: url("Adobe-Garamond-Italic.ttf");
}
@font-face {
				font-family: garamond-reg;
				src: url("AgaramondPro-Regular.otf");
}
h2{
	text-align: center;
	font-family: "garamond-italic";
}
h3 {
	text-align: center;
	font-family: "garamond-italic";
}

nav{
				z-index: 2;
}
.navbar-default .navbar-nav li a{
	color: #000000
}
.navbar-default .navbar-nav li a:hover {
    color: #671f24;
	font-weight: 600;
}
.header{
 font-family: "garamond-italic";
	top: 0;
	width: 100%;
	z-index: 1;
}

.navbar-default {
		background-color: transparent;
		border: none;
	}
	
.navbar-toggle{
				z-index: 2;
}

.navbar-brand-centered {
	background-color: transparent;
	padding: 0px;
}

#main{
				margin-top: 60px;
				font-family: "garamond-reg";
				text-align: center;
}

.rural {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 50px;
	font-family: "garamond-reg";
	font-size: 20px;
	color: #ffffff;
	background-image: url(../images/button-rural.png);
	text-align: center;
	width: 140px;
	height: 40px;
	padding-top: 7px;
	padding-bottom: 5px;
}
.rural a:visited{
	color: #ffffff;
}

.foot1 {
	width: 100%;
	position: relative;
}
.foot2 {
	width: 100%;
	font-family: "garamond-reg";
				position: absolute;
				bottom: 0;
}

.foot2 ul li {
				font-family: "garamond-italic";
}

.foot2 li a{
	color: #000000
}

.foot2 li a:hover {
    color: #671f24;
				font-weight: 600;
}

/* ********** medium under 768 ********** */

@media screen and (max-width: 767px) {
	
	body {
		background-image: url(../images/background-phone.jpg);
		background-position: top;
		font-size: 17px;
	}
	
	h2 {
		font-size: 36px;
	}
	
	h3{
		font-size: 28px;
	}
	
	.header {
		font-size: 14px;
		height: 70px;
		background-color: rgba(255, 255, 255, 0.6);
		border: none;
	}
	

.logo {
				background-image: url(../images/logo-sm.png);
				width: 225px;
				height: 29px;
}

footer{
				background-color: rgba(255, 255, 255, 0.6);
	}
	
	
}
/* ********** medium under 992 ********** */

@media (min-width: 768px) {
	
	body {
		background-image: url(../images/background768.png);
		background-position: top;
		font-size: 14px;
	}
	h2 {
		font-size: 30px;
	}
	h3{
		font-size: 20px;
	}
	.header {
		font-size: 14px;
		height: 140px;
		background-image: url(../images/header-768.png);
		background-size: auto;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center;
		border: none;
	}

	.navbar-brand-centered {
				position: absolute;
				display: block;
				margin-left: -56px;
				width: 112px;
				padding-top: 0px;
				left: 50%;
}
				
.logo {
				background-image: url(../images/logo-med.png);
				width: 112px;
				height: 90px;
}
	
#nav-left {
		float: right;
		clear: both;
		padding-right: 50%;
		margin-right: 65px;
		margin-top: 56px;
	}
	
	.nav>li>a {
				padding: 4px;
	}
	
	#nav-right {
		float: left;
		clear: both;
		padding-right: 50%;
		margin-right: -328px;
		margin-left: 0;
		margin-top: -27px;
	}
	
	#main {
				margin-top: 120px;
}
	
	footer {
		margin-top: 20px;
	}
	
	.foot1{
		height: 391px;
		background-image: url(../images/footer-1-1200.png);
		background-position: center;
	}
	
	.foot2 {
		background-image: url(../images/footer-922.png);
		background-position: center;
		height: 176px;
		text-align: center;
	}
	
	.foot2 ul {
	   margin-top: 70px;
	   list-style-type: none;
	   display: inline-block;
	}
	.foot2 li {
	   float: left;
	   padding-right: 15px;
	   font-family: 'Cormorant Garamond', serif;
	   font-size: 18px;
	}
	.foot2 ul li:after {
	   content: "|";
	   padding-left: 15px;
	}
	.foot2 ul li:last-child{
		list-style-type: none;
	}
	
}
hmds is offline   Reply With Quote
Old 9th November 17, 08:19 AM   #2
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: problems with bootstrap navbar collapse

I will have proper look this evening after work. Without reading your code make sure you are linking to bootstrap correctly and try and use the most up to date version.
spikemeister is offline   Reply With Quote
Old 9th November 17, 09:31 PM   #3
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: problems with bootstrap navbar collapse

Back again
The problem is with mixing classes and id

Change this line
Code:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
to
Code:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-brand-centered">
should fix it
spikemeister is offline   Reply With Quote
Old 10th November 17, 12:25 AM   #4
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 85
Default Re: problems with bootstrap navbar collapse

Thanks a lot for looking at it for me.

But I couldn't find the #navbar-brand-centered in my code. I already had the .navbar-brand-centered you wanted me to change it.

Either way I ended up redoing the entire page from scratch focusing on making sure the nave worked. I don't really understand what i did differently but its working now. In fact starting from scratch seemed to make all the problems I have been having that I posted in other post recently go away.
hmds is offline   Reply With Quote
Old 10th November 17, 07:38 AM   #5
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: problems with bootstrap navbar collapse

Hi my mistake i think, i rewrote it to find the problem and posted my own code. Apologies.

The theory behind the problem was the same though

In the css you have

Code:
.navbar-brand-centered {
				position: absolute;
				display: block;
				margin-left: -56px;
				width: 112px;
				padding-top: 0px;
				left: 50%;
which is a class

then in the body of the document you have
Code:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-brand-centered">
the menu should be referenced with #

then the menu itself has

Code:
<div class="collapse navbar-collapse" id="navbar-brand-centered">
glad you fixed it though
spikemeister is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:00 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.