Hi guys. I’m new to the forum. I’m working on a website for a business, and I’m using bootstrap for the site. When I minimize the width of the webpage, my brand header flows outside of the element. I’m rather new to web design. I think it may have something to do with CSS’s positioning elements. Here is a link to my repository on gitHub https://github.com/jasond23507/Custom-Moulding-Website.git. Also, is there a way to view the index.html file from gitHub’s repository. I can’t seem to figure that out. Thank you.
Hi, Jason_Delgado, welcome to the forums.
We will need to see the code in question before we can give sound advice.
Please start by reading our posting guidelines.
Forum Posting Basics
You can post a working copy of the problem code, something that demonstrates the problem so we can see it on our computers, in a message, you could post the copy in a CodePen, or perhaps provide a link to your site.
Yes, sorry about that ronpat. I meant to provide a link to my gitHub repository. My initial post has been edited with the link. Here is the index.html…
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Custom Moulding | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes & Coatings</span></a>
</div>
</div>
<div class="col-md-6">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Textures</a></li>
<li><a href="#">Application</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</nav>
<!-- Featured carousel pictures -->
<div class="carousel slide" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active">
<img src="http://nebula.wsimg.com/64744f1b145fb6274ad9a942a2ba583f?AccessKeyId=54271C50D5CFAABCABB6&disposition=0&alloworigin=1" alt="Picture of Work" class="img-responsive">
</div>
<div class="item">
<img src="http://nebula.wsimg.com/4f18768d6749e629f6f693d02ced8b2c?AccessKeyId=54271C50D5CFAABCABB6&disposition=0&alloworigin=1" alt="Picture of Work" class="img-responsive">
</div>
<div class="item">
<img src="http://nebula.wsimg.com/d37a9e2347025c1175c1c96a8ea99bd0?AccessKeyId=54271C50D5CFAABCABB6&disposition=0&alloworigin=1" alt="Picture of Work" class="img-responsive">
</div>
<div class="item">
<img src="http://nebula.wsimg.com/4dc2d89f5d65b4a96b7d0845a725f39e?AccessKeyId=54271C50D5CFAABCABB6&disposition=0&alloworigin=1" alt="Picture of Work" class="img-responsive">
</div>
<div class="item">
<img src="http://nebula.wsimg.com/54f698b2f23f2ddacc6392056f350177?AccessKeyId=54271C50D5CFAABCABB6&disposition=0&alloworigin=1" alt="Picture of Work" class="img-responsive">
</div>
</div> <!-- carousel inner -->
</div> <!-- featured carousel -->
<div class="container">
<div class="row" id="about-page">
<div class="col-md-12">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit lacus, tempor nec tincidunt egestas, convallis id arcu. Suspendisse nec urna nisl. Cras bibendum risus ut convallis feugiat. Sed eget nisi felis. Praesent semper, augue vitae facilisis imperdiet, magna arcu posuere erat, nec fringilla justo felis ut ante. Quisque finibus massa vitae massa finibus, in eleifend nunc venenatis. Aliquam congue sit amet urna eu eleifend. Nulla facilisi. Vivamus porta, leo mollis vehicula bibendum, dui metus mollis dui, sit amet mollis augue nulla vitae urna. Quisque vel eleifend est. Etiam vestibulum lectus ut semper euismod.
</p>
<p>
Cras quis eros lacinia urna laoreet dignissim at at nibh. Phasellus egestas molestie velit, convallis condimentum nisl facilisis sit amet. Donec ipsum ipsum, condimentum sed tortor ac, facilisis dictum tellus. Nullam dapibus ultrices tortor, interdum tincidunt ante condimentum eu. Vestibulum pharetra, sapien id pulvinar varius, urna turpis dapibus enim, vitae accumsan leo nunc vel magna. Pellentesque lectus risus, tincidunt vel blandit dapibus, laoreet ut orci. Suspendisse varius lorem id turpis pulvinar tristique. Nam sit amet bibendum ligula, vitae molestie tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse commodo lorem erat, sed commodo eros ornare at. Cras interdum rutrum sodales. Phasellus egestas fermentum nulla, non ornare tellus sollicitudin nec. Ut suscipit auctor arcu, eu tincidunt ante aliquet vel. Vivamus aliquam egestas lacus, sit amet ultricies lorem dictum et.
</p>
</div>
</div> <!-- row -->
</div> <!-- /container -->
<div class="container">
<h2>Testimonials</h2>
<div class="row" id="testimonials-page">
<blockquote id="john" class="col-md-4">
<p>
Curabitur molestie enim lacus. Suspendisse potenti. Donec eu libero sed urna rutrum commodo. Duis eget vulputate justo, eu fermentum tellus. Donec tortor ligula, condimentum ut nisl vitae, ultricies convallis urna. Sed vel ipsum magna. Donec et commodo est. Proin rutrum sapien quis sollicitudin posuere. Maecenas porttitor tincidunt congue. Duis volutpat, nunc in pretium semper, libero sapien posuere urna, in luctus tellus sem nec massa. Nulla finibus, felis nec aliquam sodales, nisl nulla aliquet mauris, vel auctor urna diam ultricies lacus. Aenean mi tellus, fermentum non porttitor eget, pulvinar sed eros. Vivamus mollis neque risus, quis malesuada tellus mollis at. Nullam mollis neque nec fermentum dictum. Fusce id lobortis elit. <span class="small">John M. Doe</span>
</p>
</blockquote>
<blockquote id="james" class="col-md-4">
<p>
Curabitur molestie enim lacus. Suspendisse potenti. Donec eu libero sed urna rutrum commodo. Duis eget vulputate justo, eu fermentum tellus. Donec tortor ligula, condimentum ut nisl vitae, ultricies convallis urna. Sed vel ipsum magna. Donec et commodo est. Proin rutrum sapien quis sollicitudin posuere. Maecenas porttitor tincidunt congue. Duis volutpat, nunc in pretium semper, libero sapien posuere urna, in luctus tellus sem nec massa. Nulla finibus, felis nec aliquam sodales, nisl nulla aliquet mauris, vel auctor urna diam ultricies lacus. Aenean mi tellus, fermentum non porttitor eget, pulvinar sed eros. Vivamus mollis neque risus, quis malesuada tellus mollis at. Nullam mollis neque nec fermentum dictum. Fusce id lobortis elit. <span class="small">James R. Collins</span>
</p>
</blockquote>
<blockquote id="Andrea" class="col-md-4">
<p>
Curabitur molestie enim lacus. Suspendisse potenti. Donec eu libero sed urna rutrum commodo. Duis eget vulputate justo, eu fermentum tellus. Donec tortor ligula, condimentum ut nisl vitae, ultricies convallis urna. Sed vel ipsum magna. Donec et commodo est. Proin rutrum sapien quis sollicitudin posuere. Maecenas porttitor tincidunt congue. Duis volutpat, nunc in pretium semper, libero sapien posuere urna, in luctus tellus sem nec massa. Nulla finibus, felis nec aliquam sodales, nisl nulla aliquet mauris, vel auctor urna diam ultricies lacus. Aenean mi tellus, fermentum non porttitor eget, pulvinar sed eros. Vivamus mollis neque risus, quis malesuada tellus mollis at. Nullam mollis neque nec fermentum dictum. Fusce id lobortis elit. <span class="small">Andrea J. Simmons</span>
</p>
</blockquote>
</div>
</div> <!-- container -->
<footer class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>Copyright © 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
<a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
<a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
<a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
</div>
</div> <!-- row -->
</footer> <!-- container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here is the CSS
/* ==========================================================================
Author's custom styles
========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Slab:400,700);
body {
font-family: "Roboto Slab", serif;
line-height: 200%;
}
nav .navbar {
background: rgb(234, 234, 234);
margin-bottom: 50px;
}
.navbar {
}
nav {
height: 100px;
}
.navbar .navbar-brand {
color: #fff;
}
.navbar .navbar-brand .subhead {
font-family: "Ubuntu", sans-serif;
}
.navbar .navbar-brand:hover {
color: #9d9d9d;
}
.navbar .navbar-nav li a {
color: #fff;
}
.navbar .navbar-nav li a:hover {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav #active a {
color: #9d9d9d;
}
ul.nav.navbar-nav.navbar-right {
margin-top: 20px;
font-family: "Times New Roman", sans-serif;
font-size: 18px;
}
#featured {
margin-top: 100px;
}
h1 {
margin-top: 0;
margin-bottom:0;
font-size: 1.8em;
font-family: "Times New Roman", sans-serif;
}
h2 {
font-family: "Times New Roman", sans-serif;
}
#about-page {
margin-top: 30px;
}
footer {
margin-top: 30px;
margin-bottom: 20px;
}
OK, I have a few suggestions. This should get you well along the way.
First, though, change the position of the button and the anchor in the HTML.
change from:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes & Coatings</span></a>
</div>
to:
<div class="navbar-header">
<a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes & Coatings</span></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Next, change the fixed height of <nav> to auto and add a min-height.
from:
main.css (line 22)
nav {
height: 100px;
}
to:
nav {
height:auto;
min-height: 100px;
}
and add to main.css as overrides or changes:
.navbar {
min-height:100px;
margin-bottom:0;
}
.navbar-brand {
height:auto;
}
.navbar-fixed-top {
position:static;
}
#featured {
margin-top:0;
}
Apply this padding with a media query at the width when the hamburger button appears or at a narrower width (but before the hamburger button wraps beneath your brand).
.navbar-brand {
padding:15px 0 0;
}
2 Likes
@ronpat Thank you so much for taking the time to resolve my issue. I’m curious to know why those css statements worked. Also ronpat, the first image of my carousel takes forever to change to the next image, but once it goes to image number 2; then there is a 6 second interval, which is what I want. Any ideas on how to fix that. I read the documentation that the Bootstrap website provides, and incorporated it into my code, but it didn’t resolve the issue. Not sure why.
I will assume that you understand the reason that the HTML statements were swapped was to make the hamburger button drop beneath the brand rather than the brand dropping beneath the button at the narrowest widths.
The CSS was changed primarily to eliminate fixed heights in the header and to return the header to the flow of the page as “static” (rather than leaving it out of the flow as “fixed”) so it could push the slider down as needed.
#featured had been assigned a margin-top that became unnecessary.
.navbar-brand needed less horizontal padding at narrow widths. The alternative was to reduce the font-size.
Fixed heights usually don’t work well in web pages, especially fluid/responsive pages. The content should control the height of boxes insomuch as possible.
Positioned elements should be used with discretion and with full awareness of the implications of using them.
Hope this helps.
I’m sorry, I cannot help with the carousel issue. That sounds like a JS issue. It might be better if you open a topic in the JS category.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.