I am using Twitter Bootstrap 3 to create this site www.peoplespropertyshop.co.uk as you can see the navigation on larger screens has a jquery effect to drop the boxes down.
My problem was that this was occuring on the small screen too and looked awful. I have create to different nav sections and hidden the animated one through media queries and hidden the other other nav from all other devices.
However for the life of me i cant see why when you click the icon in small screen view it doesn't animate anymore but the list is not appearing either.
<link href="css/styles.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
<link href="css/menu.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
</div>
<!-- Small Screens Nav Bar -->
<div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
<ul class="nav nav-pills navbar-right hidden-xs">
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Who We Help</li>
<li>News/Events</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
<!-- Larger Screens Nav Bar -->
<div class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right hidden-xs">
<li class="blue">
Home
<p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Who We Are
<p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
What We Do
<p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
</li>
<li class="blue">
Who We Help
<p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
News/Events
<p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Contact
<p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In my opinion you don't need an extra div, you can change your div with mediaqueries
#divMenu{
/* do something when it is normal */
max-width:1000px;
}
#media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
/* do something when it's too small */
max-width:800px;
}
}
Related
I'm wanting items in my nav bar to stretch across the width of the screen when on lets say a laptop, and go one-under another when on a phone.
Also, I don't like how my items are pushed over to the left , i want them to be equally spaced across the screen.
HTML:
<!-- Logo -->
<div class="navbar navbar-default navbar-fixed-top" role="">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="assets/images/BridgmanLogo.png" alt="Logo">
</a>
</div>
</div>
</div>
<!-- SLIDER -->
<header class="container-fluid intro-slider">
<div class="bg-slider-wrapper">
<div id="bg-slider" class="flexslider bg-slider">
<ul class="slides">
<li class="slide slide-1">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-2">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-3">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
</ul>
</div>
</div>
</header>
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-brand">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
</div>
</div>
If I understand you correctly, there are some changes you should do:
Read the css I added. I'm using flex to stretch the item equally in the menu.
Remove the .container div to stretch the navigation to the width of the window.
Remove the .navbar-right class from the navigation you don't need it.
I didn't take care about the mobile I'm sure you know how to do all those changes in desktop only using media query.
.navbar-brand, .navbar-nav, .navbar-nav>li {
float:none !important;
}
.navbar-nav {
display:flex;
}
.navbar-nav>li {
flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<!--<div class="container">-->
<div class="navbar-brand">
<ul class="nav navbar-nav">
<!--<ul class="nav navbar-nav navbar-right">-->
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
<!--</div>-->
</div>
http://jsbin.com/wisuyi/edit?html,css
You will have to use media queries to get responsive view.
.navbar-brand{
width:100%;
display:inline-block;
}
.navbar-brand ul li{
width:20%;
/*Adjust the percent based on 100/number of items (Here it is 5)*/
min-width:150px;
/*Keep a minimum width such that the text does not overflow*/
display:inline-block;
text-align:center;
}
/*Write media queries for Mobile and tablets*/
#media (max-width: 420px) {
.navbar-brand ul li{
width:100%;
}
}
I have created a navigation with Bootstrap's CSS. It was working great until I added images (logo & award logos). The 3 images I added are 471x249, 251x117 & 275x300 and when I look at the navigation the images are massive. I noticed this line:
.nav>li>a>img {
max-width: none;
}
I tried playing around with the max-width and that just makes it look worse.
Here is the full nav:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand">
<img src="http://2014violadepc.en.ecplaza.net/logo.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Communities
</li>
<li>Pronto
</li>
<li>Gallery
</li>
<li>Virtual Tours
</li>
<li>Design Centre
</li>
<li>Customer Care
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="http://itg-instructor-training.co.uk/Images/images/images/banner_01_01.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://arabbrains.com/wp-content/uploads/2013/03/emc-logo1-275x300.jpg" />
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Any suggestions to fix this issue with images?
You are trying to assign a max-width property without specifying the height.
Just change this line:
<img src="images/logo.jpg" />
to this
<img class="img-responsive" src="images/logo.jpg" alt="" />
and change those max-width properties you edited earlier back to their original values and it should work fine.
Now the image size will be valued (while maintaining aspect ratio) according to the height of the navbar-header.
---- UPDATE ----
I checked your fiddle and noticed a certain class where you wrote collapse instead of toggled. I have also set a max-height property for your images which you can change accordingly.
Here is a jsfiddle: http://jsfiddle.net/AndrewL32/z08oyjva/
Try setting the width of the images to 100%:
.navbar-brand img {
width: 100%;
}
I'm trying to teach myself bootstrap but I've run into a bizarre problem: my navbar seems to have a link to something that's not there.
Above the navbar I have a list of social media contacts but the last list item (instagram) seems to be creating a hyperlink in the nav bar. Now, the social media list and nav bar list are in completely separate containers, the instagram <a> tag is closed and the <li> and <ul> tags are closed.
When I look at in the browsers developer tools it's showing additional instagram links that just aren't in my HTML, so I'm at a loss. I must be missing something. Website is coledavidson.ca/web (it's still in development, don't judge).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cole Davidson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--HEADER SECTION-->
<div id="header">
<div class="row">
<span align="center"></center><div class="col-sm-9 header-img"><div class="header-img-box"><img src="images/Cole%20Davidson%20-%20White.png"></div></div></span>
<div class="col-sm-3 social-media">
<ul>
<li><img src="images/sm-icons/email.png"</li>
<li><img src="images/sm-icons/twitter.png"</li>
<li><img src="images/sm-icons/fb.png"</li>
<li><img src="images/sm-icons/linkedin.png"</li>
<li><img src="images/sm-icons/instagram.png"</li>
</ul>
</div>
</div>
</div>
<!--NAV BAR SECTION-->
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.html">About
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Education</li>
<li>Employment</li>
<li>Volunteerism</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
<li>NationBuilder</li>
<li>Digital Strategy</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!--PAGE CONTENT SECTION-->
<div class="row">
<div class="col-sm-12"><h1>Page Title goes here.</h1></div>
</div>
<div class="row">
<div class="col-sm-12"><p>Page content goes here.</p></div>
</div>
<!--FOOTER SECTION-->
<div class="row"><div class="col-sm-12"><p>Footer content goes here.</p></div>
</div>
</div>
</body>
</html>
CSS:
/*This is the stylesheet for coledavidson.ca. This website also uses the bootstrap stylesheets.*/
/*Author: Cole Davidson*/
body {
background-image: url(images/about-bg.jpg);
background-repeat:no-repeat;
background-size: auto;
background-position:center;
height: 100%;
}
.header-img img {
width: 75%;
height: auto;
}
.social-media ul {
list-style: none;
}
.social-media img {
width:30px;
height:auto;
}
Thanks in advance!
here you missed a '>' tag in <img src="">
<!doctype html>
<html>
<head>
<title>Home Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="style.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<header class ="navbar">
<div class="container navbar-inverse">
<nav role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">CASES4U</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
iPhone <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>iPhone 3g/3gs</li>
<li>iPhone 4/4s</li>
<li>iPhone 5/5s</li>
<li class="divider"></li>
<li>iPod</li>
</ul>
</li>
<li class="dropdown">
Samsung <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Galaxy S 3</li>
<li>Galaxy S 4</li>
<li>Galaxy S 5</li>
<li class="divider"></li>
<li>Galaxy Tab</li>
</ul>
</li>
<li class="dropdown">
HTC <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTC Desire</li>
<li>HTC Desire HD</li>
<li>HTC One</li>
<li class="divider"></li>
<li>HTC One M8</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</header>
</head>
<body>
<h1 class="cases-of-the-week"><center>Cases Of The Week</center></h1>
<div class="container-row">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="panel ">
<div class="panel-heading"><center>iPhone Case</center></div>
<div class="panel-body ">
<div class="iPhone-Case-1">
<img src="iPhone-Case-Of-The-Week.png"width="260" height="290" /></div>
<b><u><center>XTREME iPhone Case (iPhone 5/5s Case)</center></u></b>
It may look like fluorescent armour, but that’s because it kinda is. The XTREME iPhone Case is packed with Reactive Protection Technology, made of XRD foam which stiffens on impact and absorbs 90% of the impact. There’s also a rigid outer polycarbonate shell and an inner shock-absorbing TPE insert, which combine to make this one of the safest havens for your iPhone 5s on the planet.
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6"><div class="panel ">
<div class="panel-heading"><center>Samsung Case</center></div>
<div class="panel-body ">
<div class="Samsung-Case-1">
<img src="Samsung-Case-Of-The-Week.png" width="260" height="290" /></div>
<b><u><center>Spigen SGP Slim Armour Case (Samsung Galaxy S4 Case)</center></u></b>
The Slim Armour case for the Samsung Galaxy S4 has been specifically designed and crafted to offer amazing protection despite being incredibly slim and beautiful in appearance. The TPU case features improved shock absorption on the top, bottom and corners to effectively protect the Galaxy against external impact.
</div>
</div></div>
<div class="col-sm-4 col-xs-6"><div class="panel ">
<div class="panel-heading"><center>HTC Case</center></div>
<div class="panel-body ">
<div class="HTC-Case-1">
<img src="HTC-Case-Of-The-Week.png"width="260" height="290" /></div>
<b><u><center>Tough HTC One Case (HTC One Case)</center></u></b>
You know the feeling. The heartbreak that immediately sets in as your phone smashes to the ground. Flashes of panic, pools of sweat and buckets of tears overwhelm your body. Protect yourself from future stress with the Tough case, providing dual layers of protection. Built to withstand sudden drops and accidental falls, the Tough case for the HTC One is the epitome of protection.
</div>
</div>
</div>
</div>
<footer><center>CASES4U Inc</center></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I recently started using bootstrap and it was going well. I was learning alot and i started using the navbar they have. I used it and it was going well i even made a quick phone case website everything was going well. Until i checked on my file and saw that my website had changed. I dont understand it was fine a day ago and i didnt touch anything.
What website looks like now
You have the <header class="navbar"> inside your <head>, move it to the <body>.
<header class="navbar"> </header> should go inside <body> </body>
Make sure you got matching pairs of <div> </div> tags inside <body> </body>
Use <!DOCTYPE html>
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block