Question background:
I'm pretty new to Bootstrap and have been developing a site as of late and have run into an issues with the content of my page 'overlapping' the footer at the bottom when the window is resized to a 'mobile' device resolution.
The issue:
The following picture shows a maximized screen with no overlap.
Re-sized screen, footer overlap:
HTML:
I have a 'master page' which holds the footer, each page implements this.
<div class="row-fluid">
<div class="span12">
<div class="padding">
<h2>C#</h2>
<div class="row-fluid">
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectTwoInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 cSharpBackGroundColour">
<div class="container">
<div class="span12">
<div class="row-fluid">
<div class=" paddingTop">
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT:
Footer code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-social.css" rel="stylesheet" />
<link href="\CustomCSS\Footer.css" rel="stylesheet" />
<link href="\CustomCSS\HeroUnit.css" rel="stylesheet" />
<link href="\Bootstrap\FontAwesome\css\font-awesome.css" rel="stylesheet">
<link href="\Bootstrap\FontAwesome\css\font-awesome.min.css" rel="stylesheet">
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>Twitter’s Bootstrap with Ryan Fait’s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: auto;
}
.colour {
background-color: #272727;
height: 100px;
}
.imageCentering {
align-content:center;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
background-color: white;
}
.wrapper2 {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: white;
margin-left: 250px;
margin-right: 250px;
padding: 25px 25px 25px 25px;
}
.title {
margin-top: 40px;
padding-left: 5px;
font-family: 'Segoe UI';
color: white;
font-size: x-large;
}
.push {
height: 90px;
}
.pushtop {
height: 5px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 20px;
}
.buttonAlign {
align-content: center;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1</li>
<li>Proj2</li>
<li>Proj3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
#*</div>*#
<div class="colour">
<div class="row-fluid">
<div class="title">
Software Developer#*</div>*#
</div>
</div>
</div>
<div class="wrapper">
#RenderBody()
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="floatLeft">
<a><ul>About Me</ul></a>
<a><ul>Projects</ul></a>
<a><ul>Contact Me</ul></a>
</div>
<div class="floatRight">
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
Any help resolving this issue would be great. Please note I would also want the 'grey' background div - that holds the 3 images to be responsive.
you have several HTML code issues, I did a clean-up and also simplified things a bit for demo purposes (you may adjust at will, of course).
The HTML part:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About
</li>
<li>Contact
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1
</li>
<li>Proj2
</li>
<li>Proj3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="colour">
<div class="row-fluid">
<div class="title">Software Developer</div>
</div>
</div>
<div class="wrapper">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet rutrum leo quis aliquam. Sed pretium efficitur enim at ultricies. Nullam ullamcorper porta risus, quis imperdiet eros rutrum sit amet. Nullam in nisl bibendum, dignissim arcu quis, consectetur turpis. Cras luctus egestas ligula. Suspendisse dignissim diam a augue egestas pharetra. Donec viverra eu velit ut pharetra. Nulla suscipit, ante eget venenatis cursus, nulla erat congue tellus, faucibus cursus orci lacus sit amet urna. Nulla facilisi. Duis commodo porttitor sem. In hac habitasse platea dictumst. Integer dui elit, rhoncus vitae tincidunt nec, scelerisque ac dolor. Integer at ligula eget ligula scelerisque volutpat eget quis lorem.</p>
<p>Praesent ac sapien sit amet magna sollicitudin vestibulum et nec erat. Quisque consectetur vel dui ac dapibus. Praesent at sapien tristique augue tincidunt auctor sed non justo. Fusce ac venenatis mauris. Quisque lobortis neque a eros hendrerit consectetur ac id magna. Mauris non velit ante. Nunc orci lorem, auctor a orci a, luctus sollicitudin turpis. Phasellus ornare tempus felis eu pharetra.</p>
<p>Integer eleifend, sapien eu molestie tristique, nunc felis varius tellus, at congue magna sapien ut tortor. Maecenas sodales ultricies ligula sollicitudin cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet odio ex, ut luctus tortor mollis sit amet. Aenean rutrum consequat lorem eget porta. Aliquam lacus enim, congue ac condimentum sit amet, consequat a diam. Duis eget mauris id nisi molestie vulputate sit amet vel nulla. Curabitur ac feugiat enim, eu rutrum magna.</p>
<p>Suspendisse sed lorem ac leo volutpat sodales. Pellentesque erat ex, tincidunt eu urna ac, gravida convallis eros. Phasellus nisl purus, egestas quis ipsum id, ornare pharetra tellus. Nullam congue leo ex, nec sagittis dolor tempor nec. Sed convallis sem risus, a congue leo feugiat non. Integer placerat dui eget lorem eleifend, a gravida tortor tempus. Vestibulum at est tempor sem sollicitudin hendrerit. Etiam vitae mauris eget sapien pharetra mattis a quis metus. Mauris facilisis sapien non fringilla scelerisque. Fusce a odio ultricies, rutrum nunc quis, faucibus quam.</p>
<p>Donec sed est vitae elit dignissim gravida. Vivamus blandit eros ex, vel placerat dui ornare in. Nullam feugiat risus lectus. Cras sagittis dolor vitae vulputate accumsan. Sed arcu massa, tempor vel massa nec, vehicula pellentesque tortor. Suspendisse fringilla eros risus, a scelerisque neque tempor ut. In et velit sapien. Etiam porttitor aliquam arcu, ut mollis augue rutrum feugiat.</p>
</div>
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12 links">
<div class="floatLeft"> <a>About Me</a>
<a>Projects</a>
<a>Contact Me</a>
</div>
<div class="floatRight"> <i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
You had those <UL> elements before the footer's <A> and also an additional closing </div> on all sections. With the HTML cleaned, CSS is as simple as this:
.links .floatLeft a {
padding:30px;
background:#fc0;
}
footer, .wrapper, .push {
position:relative;
clear:both;
padding-top:20px;
}
See fiddle for complete code and preview
Related
enter image description hereI am using materialize framework for building my first basic site, however on mobile only view, the margins are quite wide and i'd like them to take up full screen, so as to make reading better and make the middle card stretch less.
I have also attached a picture now, as you can see the padding and margins are quite wide.
https://codepen.io/jehc10/pen/LKqRRQ
.brand-logo {
margin-left: 20px;
}
.card {
margin-top: 15px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'ABeeZee', sans-serif;
background: #fad1df;
}
main {
flex: 1 0 auto;
}
.custom {
margin-right: 100px;
margin-left: 100px;
}
.pagination {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 600px;
margin: auto;
border: 2px solid #f1749e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My materialize website</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="materialize.css">
<link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<main>
<nav>
<div class="nav-wrapper pink lighten-3">
Website
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<!-- Cards -->
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 1</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
</div>
<!-- Middle card -->
<div class="mobile-margin visible-xs">
<div class="lg12">
<div class="card custom light-blue lighten-5">
<div class="card-content black-text">
<span class="card-title">Example 1</span>
<p>
Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
</p>
</div>
</div>
</div>
<!-- Table -->
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<!-- Hover button -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- Pagination -->
<ul class="pagination">
<li class="disabled"><i class="material-icons">chevron_left</i></li>
<li class="active">1</li>
<li class="waves-effect">2</li>
<li class="waves-effect">3</li>
<li class="waves-effect">4</li>
<li class="waves-effect">5</li>
<li class="waves-effect"><i class="material-icons">chevron_right</i></li>
</ul>
</main>
<!-- Footer -->
<footer class="page-footer pink lighten-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Jesse
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
I found this piece of code for a timeline I need for a website online. You can see how it looks at https://jsfiddle.net/ . My question is why is it so small? I don't see anything in the css setting the size, is this a bootstrap feature?
Code also posted below:
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
Thanks for any help, as you can tell I am not the best developer but I would really like to add this feature on my site.
You should change the class of div from ".col-md-6, .offset-md-3" to ".col-12" and if and it is not sufficient then change ".container" to ".container-fluid".
<body>
<div class="container-fluid mt-5 mb-5">
<div class="row">
<div class="col-12">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
21 March, 2014
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
21 000 Job Seekers
4 March, 2014
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
Awesome Employers
1 April, 2014
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</body>
I am trying to create this in bootstrap 3:
However, right now I have got this:
My image is not lined up perfectly with the h4 tag and my p tags will not stay in a line as the first image. I am using bootstrap 3, so I am getting used it everything, and I was wondering if anyone can help me achieve this look. So far I have:
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
padding: 20px 10px;
text-align: left;
}
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
I am just trying to make it look like the first image with bootstrap 3.
remove text-align: center from .col-content p to avoid the text-centering in the paragraphs and change padding: 20px 10px; to padding: 0 10px 20px 10px; in .col-icon to move the icons up to the top of their container:
https://codepen.io/anon/pen/wpaebo
for line up use display:inline-flex;align-item: flex-start; and remove text-align: center; from p tag
Use a combination of top and left while making the icon position:relative
position: relative;
top: -11px;
left: 8px;
.col-content {
overflow: hidden;
padding: 0 15px;
}
.col-content p {
font-size: 13px;
font-weight: normal;
text-align: center;
}
.col-icon {
font-size: 48px;
float: left;
text-align: left;
position: relative;
top: -11px;
left: 8px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Web <span class="highlight">Development</span></h4>
<p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Internet <span class="highlight">Marketing</span></h4>
<p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
</div>
</div>
<div class="col-md-4">
<div class="col-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="col-content">
<h4>Client <span class="highlight">Support</span></h4>
<p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
</div>
</div>
</div>
I am building a website and part of the site consists of a place for FAQ questions. I am using bootstrap to have an accordion style display the question then when clicked on the answer will pop up. But I also have a picture displaying to the right of the FAQ section. Whenever I click on the FAQ question the answer overrides the picture to the left. I was wondering how to constrain the answer so that it will fit in its div and not override the picture. There is a comment called FAQ Question that starts that portion of the code.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Best Handrails</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
<style>
body,html
{
overflow-y: scroll;
overflow-x: hidden;
}
.header_div
{
background-color: #1a1a1a;
}
.header_image1
{
position: relative;
left: 100px;
}
.header_image2
{
position: relative;
left:70px;
}
.header_links
{
position: relative;
left: 600px;
color:white;
font-family: 'Nunito Sans', sans-serif;
}
.main_image
{
position: relative;
width: 100%;
}
.main_image_text
{
font-family: 'Nunito Sans', sans-serif;
color: white;
position: absolute;
top: 200px;
left: 750px;
width: 100%;
}
.the_idea
{
position: relative;
width: 100%;
background-color: #e6e6e6
}
.the_idea_image
{
float: left;
position: relative;
width: 25%;
top: 35px;
left: 100px;
/*border:20px solid #BDB76B;
border-radius: 180px;*/
}
.the_idea_title
{
font-family: 'Nunito Sans', sans-serif;
position: relative;
left: 250px;
}
.the_idea_text_div
{
float:right;
position: relative;
left: 200px;
top: 10px;
width: 75%;
margin-bottom: 10px;
}
.the_idea_text
{
font-family: 'Nunito Sans', sans-serif;
float:left;
position: relative;
left: 0px;
top: 10px;
width: 75%;
}
.quote_div
{
/*width:800px;*/
margin:10 auto;
/*overflow:hidden;*/
float:left;
/*position: relative;
top: 400px;*/
top: 400px;
width: 100%;
background-color: #333333
/*z-index: 0;*/
}
.quote_text
{
width:100%;
float:left;
color:white;
font-family: 'Nunito Sans', sans-serif;
text-align: center;
/*position: absolute;
top: 400px;*/
/* z-index: 1;*/
}
.faq_div
{
float:left;
top:500px;
text-align: center;
background-color: #d9d9d9;
}
.faq_questions
{
font-family: 'Nunito Sans', sans-serif;
color:black;
/*text-align: left;*/
text-align: center;
}
.faq_dropdown
{
text-align: left;
width: 100%;
}
.faq_answer_dropdown
{
width: 50%;
}
.faq_hr
{
color:white;
}
.faq_image_div
{
background-color: #d9d9d9;
float:right;
width: 36.0625%;
height: 939px
}
.faq_image
{
float:right;
position: relative;
/*width: 25%;*/
top: 400px;
right: 60px;
/*left: 200px;*/
border:20px solid #BDB76B;
border-radius: 170px;
}
.gallery_div
{
}
.gallery_info
{
}
</style>
</head>
<body>
<div class="header_div">
<img class="header_image1" src="../image-assets/BestHandRail_Logo_W-01.png" alt="BestHandRail_Logo" style="width:600px;height:150px;">
<img class="header_image2" src="../image-assets/BuyNow_Button-01.png" alt="BuyNow_Button" style="width:300px;height:150px;">
<nav id= "nav_links">
<a class="header_links" href="index.html"> THE IDEA </a>
<a class="header_links" href="index.html"> FAQ </a>
<a class="header_links" href="index.html"> GALLERY </a>
<a class="header_links" href="index.html"> PURCHASE </a>
</nav>
</div>
<div class="main_image">
<img src="../image-assets/20160730_142111.jpg" alt="OldMan" style="width:100%;height:100%;">
<h1 class = "main_image_text "> HELPING <br> SENIORS <br> STAY <br> SAFE. </h1>
</div>
<div class="the_idea">
<div class="the_idea_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:320px;height:340px;">
</div>
<div class="the_idea_text_div">
<h2 class="the_idea_title"> THE IDEA </h2>
<p class ="the_idea_text"> One Sunday afternoon as we were walking into the house after church, I realized my wife needed something to help her navigate the steps from our garage into our house. Monday morning found me searching in vain across the internet and through U.S. Patents. It became obvious that what my wife required did not exist. As a matter of fact, nothing like I imagined existed. So, I invented the Best Handrail and submitted my design with the necessary patent forms and received notification of patent-pending within a couple weeks.<br> <br> Now, the Best Handrail—the perfect solution for my wife—is available for everyone from besthandrail.com. The Best Handrail will help you and your loved ones navigate entry steps and other recessed or elevated living spaces, inside and outside your home. I know members of your family will benefit from the stability provided by the Best Handrail, just as my wife does. <br> <br>The Best Handrail could be the best solution for navigation, entry and improved mobility in your home. You’ll soon wonder how you ever got along without it. <br> <br> <strong>Purchase yours today.</strong> With our overnight shipping option, you can enjoy the benefits of your Best Handrail tomorrow. <br> <br> </p>
</div>
</div>
<div class="quote_div">
<hr>
<div class="quote_text">
<h2> MY HANDRAIL HAS MADE LIFE <br> I FEEL SAFER THAN I HAVE IN YEARS! <br> –MABEL BROWN, AGE 96 </h2>
<hr>
</div>
</div>
<!-- FAQ Section -->
<div class="faq_div">
<h2 class="faq_questions"> FAQ </h2>
<div class="faq_questions faq_dropdown">
<div class="container faq_dropdown" >
<div class="panel-group faq_answer_dropdown" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Will THE BEST HANDRAIL help me if I have difficulty going up or down steps?</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Will THE BEST HANDRAIL improve my mobility?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Enim pulvinar vehicula ut magna. Nullam semper quisque pede at ut massa, sed lorem porta, etiam et dis enim vivamus posuere mi, eleifend quam per duis, faucibus vitae quam. Augue vivamus sed pellentesque ligula. Neque arcu minus euismod cras eget rutrum, sit eget nascetur, suscipit eleifend accumsan nullam nulla consectetuer cursus. Massa facilisi eu auctor interdum. Pellentesque enim dictumst justo nullam. Mauris tellus rhoncus fringilla, ut feugiat. Ridiculus est porta nulla. Purus quisque neque est amet quis. Quam at. Ut a urna donec gravida consequatur, sed tristique imperdiet nam at sit turpis.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Can THE BEST HANDRAIL be installed where there are changes in doorway elevation—a tripping hazard?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Fusce vitae ultrices vivamus, mauris metus integer dolor tortor et, pharetra sapien curae, vestibulum ultrices velit arcu risus. Et turpis adipiscing, morbi aliquam, condimentum mauris, lacinia luctus, scelerisque justo justo massa vitae. Magna donec, faucibus in sem pede lectus sed duis, ipsum proin a urna orci dolor. Euismod lorem penatibus sed fringilla nec. Cursus erat, consectetuer quam neque sed aliquet phasellus libero, nibh adipiscing consequat ante nec torquent aliquam, libero risus tempor ornare.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">Elit amet massa, ligula sapien neque lobortis donec vel. Odio justo a, quisque habitasse vel velit ligula interdum, vestibulum egestas aliquam nulla odio vitae. Nam luctus mauris id a sollicitudin sem. Placerat amet nibh sodales diam, ac sed pellentesque purus arcu amet urna, lobortis porta cras. Et elit amet turpis aliquam commodo, odio faucibus leo quam at nec, lorem nullam fermentum, duis eros suscipit sem imperdiet nam sem, quis fermentum molestie nec.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse6">It THE BEST HANDRAIL easy to install?</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">Vestibulum adipiscing. Nullam diam et nonummy venenatis adipiscing imperdiet, lectus condimentum eget, wisi morbi, nulla scelerisque, lorem lacus a mus a. Semper dolor, pellentesque sed ipsum natoque vehicula purus. Cum dui at pede nec amet. In neque nibh praesent wisi, lectus porttitor arcu nulla, cras felis molestie adipiscing dolor lobortis sem. Libero integer in, vel urna faucibus.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse7">Are they different models of THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse8">How many colors of besthandrail.com are there?</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body">THE BEST HANDRAIL comes in four different colors or finishes: <br>
Flat Midnight Black (durable flat black) <br>
Victorian White (sun-bleached white-gray) <br>
Statuary Bronze (satin-finished blackened bronze) <br>
Brick Brown (rich brown with textured finish).</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse9">How much does besthandrail.com cost?</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse10">How do I order THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse11">How will THE BEST HANDRAIL shipped to me?</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Image next to FAQ -->
<div class="faq_image_div">
<div class="faq_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:300px;height:300px;">
</div>
</div>
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../image-assets/Brown.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="../image-assets/White.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
set a width for faq_div
for instance:
.faq_div{
width:500px
}
or
.faq_div{
width:40%
}
I'm trying to create a navbar that is a fraction of the size of the logo, and allows for additional content to be place underneath it. Like this:
The jsFiddle below shows what I have now. The black line shows the bottom of the nav bar, which has extended to be the same size as the image.
I have tried setting the height of the nav bar to 50px, but that causes all content underneath it to move up (which really throws the layout off). I have also tried surrounding everything with containers, but that also did not seem to work. I imagine any solution will involve one or both of those ideas, but I am not sure how to implement it.
Here's a Demo in jsFiddle
Here's my code:
<div class ="container-fluid">
<img id="logo" class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQevVAv_ZVUfI8i5cMpRZGbIu71MGjPUqR70qR7F877JKyWJWdEXw">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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="#"><img class="img-responsive" src="img/logo.jpg"></a> -->
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
Any advice would be appreciated.
This will give you a good place to start when it comes to mixing columns and nav elements together while keeping everything orderly and responsive.
Make sure to include Bootstrap CSS, JS and jQuery or your mobile nav toggle won't open. Working example
.navbar.navbar-default {
border-radius: 0px;
border-left: transparent;
}
#navbar-collapse {
border-bottom: 1px solid #266080;
}
.lower-nav {
color: #fff;
font-size: 20px;
padding: 23px 20px;
height: 78px;
color: #266080;
background-color: #fff;
border-bottom: 6px solid #266080;
}
#brand-logo {
background-size: cover;
position: absolute;
}
#brand-logo img {
width: 100%;
height: 130px;
min-width: 150px;
}
div.nopadding {
padding: 0;
margin: 0;
}
.nav-buttons {
border-radius: 0px;
}
.navbar-brand {
display: none;
}
.wrapper {
height: auto;
background-color: #fff;
margin-top: 0px;
padding: 10px 20px;
}
.well {
background-color: transparent;
border: 3px solid #428bca;
border-radius: 0px;
text-align: center;
font-size: 25px;
}
#media (max-width: 768px) {
.lower-nav {
font-size: 20px;
padding: 25px 20px;
}
.navbar-brand {
display: block;
}
}
#media (max-width: 480px) {
.lower-nav {
font-size: 18px;
padding: 20px 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-2 hidden-xs nopadding">
<div id="brand-logo">
<img src="http://placehold.it/350x350/266080/fff?text=Home" alt="Home" />
</div>
</div>
<div class="col-md-10 col-sm-10 nopadding">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search
</li>
<li>Archives
</li>
<li>Education
</li>
<li>About
</li>
</ul>
</div>
<div class="lower-nav"><span class="title">Text here</span>
<div class="btn-group pull-right">
<div class="btn btn-info nav-buttons">Hello</div>
<div class="btn btn-warning nav-buttons">Hello</div>
<div class="btn btn-danger nav-buttons">Hello</div>
<div class="btn btn-default nav-buttons">Hello</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="wrapper">
<div class="well"> Bootstrap 3
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
<p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
<p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
vestibulum eu sit amet urna.</p>
<p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
<p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>
You could add a row and some columns as I have done below. Placing your image in the first column to the left and then the nav bar in the second column.
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<a href="#" class="pull-left">
<img id="logo" class="img-responsive" src="http://i.imgur.com/yhGyJ8P.png" />
</a>
</div>
<div class="col-md-10">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<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="#">
<img class="img-responsive" src="img/logo.jpg">
</a> -->
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
http://jsfiddle.net/jx6e857y/
Here is another example you could use with some bootstrap css overrides.
HTML:
Toggle navigation
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Search
</li>
<li>Archives
</li>
<li>Education
</li>
<li>About
</li>
</ul>
<br />
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-road"></i>
</li>
<li><i class="glyphicon glyphicon-leaf"></i>
</li>
<li><i class="glyphicon glyphicon-phone"></i>
</li>
<li><a href="#"><i class="glyphicon glyphicon-link"></i></li>
</ul>
</div>
<span class="additional-text">This is your additional text</span>
</div>
</nav>
CSS overrides: (Make sure this is after your bootstrap.css file)
/*md+ DESKTOP */
#media (min-width: 768px) {
.collapse.navbar-collapse .nav.navbar-nav:first-child {
border-bottom: 1px solid grey;
}
.collapse.navbar-collapse .container-fluid {
float:right;
}
.additional-text {
position:absolute;
bottom:0px;
margin-bottom:8px;
margin-left:8px;
font-size:22px;
color:grey;
cursor:arrow;
}
}
/* md- overrides MOBILE */
#media (max-width: 767px) {
.collapse.navbar-collapse .nav.navbar-nav:first-child {
border-bottom: 1px solid lightgrey;
margin-bottom: 0px;
}
.collapse.navbar-collapse .nav.navbar-nav:first-child li:last-child {
border-bottom: 1px solid lightgrey;
margin-bottom: 0px;
}
.collapse.navbar-collapse .nav.navbar-nav:last-child li:first-child a {
padding-top: 0px;
}
.navbar-header img {
max-height:80px;
}
.collapse.navbar-collapse.in .nav.navbar-nav {
float:none !important;
display:block;
}
.additional-text {
position:relative;
font-size:22px;
display:none;
}
}