I am using bootstrap in my project but when I resize the window my template commix completely.My navbar would explode and some part of my page is not shown and...
Every thing is wrong...
And when I use a mobile to see my website not only the bootstrap is not loaded but also every thing is wrong there too.
I use just the codes in bootstrap site but in their site its working well and in my project its not.
for example I copied this navbar from the site and it has the problem with resizing:
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input class="search-query span2" type="text" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>
Link
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
what should I do to solve this problem?
Edit:
The issue is solved for resizing the window but the problem with mobile is remained...
My _Layout header code is like this:
<
head>
<meta charset="utf-8" />
<style type="text/css">
##media (max-width: 767px) {
.search-query {
display: none;
}
}
##-ms-viewport {
width: device-width;
}
</style>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/mosaic.1.0.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Site.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
</head>
I have the codes between <style> tags in my bootstrap-responsive.css too.
Try adding this line in the head section of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't work you can use media queries, like the following:
#media (max-width: 767px) {
.search-query {
display: none;
}
}
More info about media queries is here: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Related
I'm developing my own website using bootstrap and I added a collapse navbar fixed at the top but it does not unfold when I click the hamburger button.
I've read some blogs and do not seem to have the two main problems which are:
- not putting a good data-target
- not putting the jquery call before the bootstrap javascript
I've literary spent the whole day today trying to figure this out. Here is my html, if you find something I would be so relieved.
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="screen" type="text/css" href="cvop1.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" type="text/css" href="petite_version1.css" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title> Oncle Joe </title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="#">Joseph Durand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Formations <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Cours proposés</li>
<li>Macroéconomie</li>
<li>Histoire de la philosophie politique</li>
<li>Mécanique quantique</li>
<li role="separator" class="divider"></li>
<li>Suggestions et avis</li>
</ul>
</li>
<li class="dropdown">
Orientation<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Guide des études</li>
<li>Études à l'étranger</li>
<li>Autres témoignages</li>
<li role="separator" class="divider"></li>
<li>Ajoutez vos parcours</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Découvrez et commmentez !</li>
<li>Musique</li>
<li>Artistes famille</li>
<li role="separator" class="divider"></li>
<li>Partagez-moi vos créations</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Un accès public et privé</li>
<li>Ma mif</li>
<li>Ma meuf</li>
<li>Mes gars sûrs</li>
</ul>
</li>
<li> Mini-jeux </li>
<li> <img src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-1/p320x320/15871974_1190156091033303_4585352380125885170_n.jpg?_nc_cat=103&_nc_sid=dbb9e7&_nc_ohc=qn93db1mdrMAX_7cN9y&_nc_ht=scontent-cdt1-1.xx&_nc_tp=6&oh=495fb008b60203147ed553338147388b&oe=5EC9B841" alt="C'est moi!" width="22" height="22"/> </li>
</ul>
</div>
</nav>
```
I've read through others posts the whole evening and just found one that answers mine. I had downloaded a too recent jQuery version (3. something) whereas it only works with jQuery 1 or 2
I got the idea from the first comment to this question:
Navbar collapse is not working in Bootstrap
I'm sorry if I bothered any of you too long with this and hope this will help others:
Check the data-target
Check that jquery is called before the bootstrap javascript
Check that your jquery and bootstrap versions correspond to the commands/functnionalities you want
I'm creating a webpage, I want to be able to do a header for each page
I want it to consist of
(An Image) Home news about us web call email
I have this code so far:
<!DOCTYPE html>
<html>
<body>
<nav class="navbar navbar-light bg-faded">
<img src="jazz.jpg" alt="HTML5 Icon" width="250" height="100">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">news</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">web</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">call</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">email</a>
</li>
</ul>
</nav>
</body>
</html>
However, I just get the image and the rest are under the image, how can I put them all next to each other and make the header background gray? Is there anyway to solve this issue??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>News</li>
<li>About Us</li>
<li>Web</li>
<li>Call</li>
<li>Email</li>
</ul>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
So this code will give you the header you are looking for. You can add an image in the header if you want still, but you will have to play around with the styling to make it look good. Let me know if you have any questions or need anything clarified. Hope this helps!
You can use display for this. display:inline or a newer version display:flex
Just add some css styling to your HTML to achieve your goal.
Play around with this JSfiddle:
https://jsfiddle.net/ry3hgrtq/
I added these classes to your html.
.navbar img {
display:inline;
float: left;
}
.navbar ul {
list-style-type: none;
}
.navbar li {
display: inline;
padding: 2px;
margin: 2px;
}
I've got this nav element on my webpage header:
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu container">
<li> <a class="home" href="index.php"><span> Home</span></a></li>
<li><a id='info' href='info.php'>Info</a>
<div>
<ul>
<li>About it </li>
<li>How to </li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
I would like to hide the 2 internal <li> elements (the submenu of my menu) when running on mobile.
As mentioned here: Hide one item from menu on mobile I tried to add this class to the 2 <li> elements:
...
<li><a class="dropdown hidden-xs" href="info.php#step1">About it</a> </li>
<li><a class="dropdown hidden-xs" href="info.php#step2">How to</a> </li>
...
but still nothing happens on small devices: the entire menu is always visible.
Any ideas?
Have you tried Media Queries?
http://jsfiddle.net/geargio72/0kb8ecea/
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu container">
<li> <a class="home" href="index.php"><span> Home</span></a></li>
<li><a id='info' href='info.php'>Info</a>
<div>
<ul class="rowHide">
<li>About it </li>
<li>How to </li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
#media screen and (min-width: 0px) and (max-width: 765px)
{
.rowHide { display: none; }
}
See this it will give you idea...
Without using media query...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu container">
<li> <a class="home" href="index.php"><span> Home</span></a>
</li>
<li><a id='info' href='info.php'>Info</a>
<div>
<ul>
<li><a class="hidden-xs" href="info.php#step1">About it</a>
</li>
<li><a class="hidden-xs" href="info.php#step2">How to</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="script.js"></script>
</body>
</html>
The problem was with my PHP HTML/CSS theme. There is a custom.js file that manage the mobile menu.
I post the solution that I've found because I think that's pretty common to use this kinds of PHP HTML/CSS themes.
First of all I add the class for hidden-xs to the anchor element:
<li><a class="hidden-xs" href="info.php#step1">About it</a></li>
<li><a class="hidden-xs" href="info.php#step2">How to</a></li>
Then i changed the custom.js of the theme adding the .not('.hidden-xs') on the row after the // Populate dropdown with menu items comment
// Category Menu mobile
$("<select />").appendTo("nav.subnav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav.subnav select");
// Populate dropdown with menu items
$("nav.subnav a[href]").not('.hidden-xs').each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav.subnav select");
});
// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
$("nav.subnav select").change(function() {
window.location = $(this).find("option:selected").val();
});
I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{
padding-top: 60px;
padding-bottom: 40px;
}
.renderBody {
height: 462px;
overflow: auto;
padding-top: 60px;
padding-left: 440px;
margin: initial;
}
#login{
padding-right: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="navContainer">
<img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
<form class="navbar-form pull-right">
<ul class="breadcrumb" id="login">
<li> Login
<span class="divider"> /
Register</span></li>
</ul>
</form>
</div>
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.facebook.com">Some Information</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">More Information</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active">Traveling</li>
<li class="active">Moving</li>
<li class="active">Sports</li>
</ul>
<!--<form class="navbar-form pull-right">
<ul class="nav"><li class="active">Register</li></ul>
</form>
</div>-->
</div>
</div>
</div>
<div class="renderBody">
#RenderBody()
</div>
</div>
</body>
</html>
There are a few things you can try layout-wise, before you go down the road of screen measurement in script:
First, be sure to use the viewport meta tag (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Next, wrap RenderBody with the bootstrap container class:
<div id="main" class="container">
#RenderSection("featured", required: false)
<section>
#RenderBody()
</section>
</div>
Also, if you're not already familiar with it, you may want to read up on the fluid grid system in bootstrap (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)
Lastly, if all else fails, you can use the overflow CSS property on your content container:
.renderBody {
overflow-x: scroll;
}
I am using bootstrap framework and tried to replicate http://twitter.github.com/bootstrap/examples/hero.html
can any one please tell me why the dropdown-menu is not working.
the drop down menu which works in the example is not working with my code and i have included proper styles and js ! and one other styles are working so thinking its not a prob with the style any help ll be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
#bana close the footer close tag
Edit your Script Reference like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I have used the below online utility before and it has worked for me. It is free and quick. I created a sample dropdown menu and then examined the code to apply to my website. Good luck.
CSS Menu Maker
Use the css and js file the following way: Check Jsfiddle Example with cloud hosted bootstrap css and js
Also you are using wrong version of Jquery in your page it has to be
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The html should like below :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
</head>
And in footer :
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>