I wanted to add a bootstrap collapse navbar for smaller screen sizes for tablets and mobile phones. For some reason the navbar collapses in general even at the regular laptop screen size. Also when I press the button, the links appear below the navbar instead of inside the navbar. Don't understand the issue as I have used this same bootstrap collapse code before on a different project and had no issues. Please help if you can, thank you.
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
height: 80px;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 40px;
color: gold;
font-family: "Calistoga", cursive;
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Calistoga&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Latest compiled and minified CSS Bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNavbar"
>
<div class="toggler-btn">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 0 40px;
color: gold;
font-family: "Calistoga", cursive;
}
.navbar-toggler {
color: #ffffff;
}
#media screen and (max-width:768px) {
.links li a {
padding: 0 0 5px;
color: gold;
font-family: "Calistoga", cursive;
}
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Latest compiled and minified CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-expand-md navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
Related
I want to change the height and background color of the <hr> tag in HTML. Although the height and color change, but it seems the background color opacity is reducing slightly. Why is this happening?
My Code:
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
How can I get the original color and why is this problem happening? I am using the current version of Chrome (Windows 10).
Edited
I get such output in the browser when I run the whole code:
My whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: url(./images/bg-masthead.jpg) no-repeat center center/cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
In your reboot.scss you have an hr style with opacity:.25;.
Add:
hr {
opacity:1;
}
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#ff0000;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
/*background: url(./images/bg-masthead.jpg) no-repeat center center/cover;*/
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
hr {
opacity:1;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
You have a reboot.css in bootstrap file that has opacity: .25, so you have to reset your hr by adding opacity: 1 to it
I've been having trouble and I'm when I searched the web, I couldn't find the solution to this.
I'm currently using bootstrap to create my website, but when I shrink the page down to mobile/tablet-sized, my navbar list shifts to the left. I want it center-aligned, but ONLY when the screen is small. Otherwise, I want my list to be on the right.
I've included a code sample below:
HTML:
<title>ZebarWorld Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class = "container-fluid">
<div class ="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
</body>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
>}
.navbar{
background-color: #FFFFFF;
margin-top: 30px;
}
.navbar-header{
}
.navbar-brand{
}
.navbar-brand img{
max-width:100%;
width: 300px;
height: auto;
}
.navbar-text{
text-align:center;
}
.navbar-nav{
border-radius: 25px;
background: #A12F2F;
padding: 10px;
}
.myNav{
text-align: center;
}
.myNav li{
float:none;
display:inline-block;
}
a.navi{
text-decoration: none;
}
a.navi:link{
color:white;
}
a.navi:visited{
color: white;
}
a.navi:hover{
color: black;
}
a.navi:target{
color: red;
}
https://jsfiddle.net/0jpsyot2/1/
You should use these classes justify-content-center justify-content-md-between on container tag
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid justify-content-center justify-content-md-between">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
By my suggestion you can use the media query in this code
#media (max-width: 645px){
.nav{
margin-left: 50%;
}
}
in this code i use you nav class and apply media query on this.
or you can also use justify-content-center bootstrap class to centralized your button.
I am trying to make my #home background image to be responsive so when I resize my browser or see it through my mobile it should be responsive please tell me how do I do this? as you can see when I resize my browser the background image does not cover the complete browser.
and on the right side there is white space which means the background image does not stretch to cover the whole section
I hope you understand.
here is my code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/jumbotron.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" 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="/"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper -->
<!-- Home -->
<section id="home">
<div class="col-sm-7 hero-text">
<h1>I'm <span>Ali</span></h1>
<p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>
<ul id="social-icons">
<li><i class="fa fa-facebook fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-google-plus fa-2x"></i></li>
</ul>
</div>
</section>
<footer>
<p>© Muhammad Ali</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11.3/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
and CSS
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/*Header*/
body {
margin-top: 50px;
font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
font-size: 16px;
background: url('../img/tile.jpg') top left repeat;
}
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') 50% 0 repeat fixed;
min-height: 500px;
padding: 40px 0;
}
.hero-text {
text-transform: uppercase;
}
.hero-text h1{
position: relative;
top: 20px;
}
.hero-text h1 span {
color: #FBB829;
}
.subtitle {
padding: 15px 25px;
border: 2px solid black;
text-transform: uppercase;
font-size: 18px;
color: black;
font-weight: 250;
letter-spacing: 0.3em;
margin-right: 25px;
display:inline-block;
position:relative;
left:600px;
top: 20px;
transform: translateX(-50%);
}
Thanks for the help
You can use the background-size: cover css attribute. So it would go on your #home selector like this.
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') no-repeat center center fixed;
background-size: cover;
min-height: 500px;
padding: 40px 0;
}
See this for reference https://css-tricks.com/perfect-full-page-background-image/
Try this:
#home {
min-height: 500px;
padding: 40px 0;
background-image: url("http://cookusart.com/images/2/images-background/images-background-02.jpg");
background-repeat: no-repeat;
background-position: center center; /* center the image */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have changed the default bootstrap style by adding the margin and padding in my style.css but i want that the navigation would be at the left corner and not in the middle header side when i resize my browser screen to mobile size. How can i do it?
Here is my index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Responsive Project (Prototype)</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.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header class="mainHeader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--HEADER-->
<div class="navbar-header">
<a class="navbar-brand">A.M.®</a>
<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>
<!--BODY-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Work Positions</li>
<li>Contacts</li>
</ul>
<!--USER OPTIONS-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign Up</span></li>
<li><span class="glyphicon glyphicon-log-in"> Register</span></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
style.css:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
margin-left: 150px;
font-weight: 600;
}
.navbar-header {
padding-left: 150px;
}
You can use media queries to only apply your styles to larger screens, like so:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
font-weight: 600;
}
#media (min-width: 768px) {
.navbar-nav {
margin-left: 150px;
}
.navbar-header {
padding-left: 150px;
}
}
For some reason, my html file will not have the navbar fixed at the top when the website is accessed through a mobile phone. It is, however, fixed at the top for my PC web browsers. What exactly is wrong here?
Note: If I remove responsive.css, then the mobile version is fixed at the top, but not responsive.
Various different answers suggested nav bar fixed top, 0 pixel padding, and user scalable no. None of those seemed to work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 0px;
padding-bottom: 0px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
</head>
<br><br><br>
<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="#">TMedia</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Contact Us
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<a href="http://google.com">
<img src="google.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<a href="http://yahoo.com">
<img src="yahoo.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Actually, my only problem here was my version of Bootstrap.
In the above code, I was running 2.2.2 and it does not support all mobile aspects fully. After ugprading to 3.0.3, everything works fine.