Can someone take a look at my html? Previously, my scrollspy was working but I dont know what happend and its not working anymore. I have been at this for 2 hours and I still can't get it to work. I dont recall doing any breaking changes.
<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">
<title>Nate The Great</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|Istok+Web|Lora" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel='shortcut icon' type='image/x-icon' href='./assets/img/favicon.ico' />
</head>
<body data-spy="scroll" data-target="#navbar" >
<!--Start of Navigation Bar-->
<div class="navbar transparent pull-right navbar-fixed-top" id="navigation">
<div class="container-fluid">
<p class="navbar-brand " id="brand"> <img src="./assets/img/profile.jpg" alt="" style="display: inline; margin-right: 3px; border-radius:50%">Nathaniel D Alcedo Jr</p>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About</li>
<!--<li>Blog</li> will workk on this-->
</ul>
</div>
</div>
</div>
<!--End of Navigation Bar-->
<!--Landing Page-->
<div id='home'>
<h1>
Nathaniel D Alcedo Jr,
</h1>
<h2 >aspiring web developer</h2>
</div>
<!--End of Landing Page-->
<div class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <u>Calculator</u></p>
</div>
<div class="pull-left" id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer.
I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck
around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.<br><br>
My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby!
It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently
doing Free Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to
look for a job in this wonderful field we call software development.
</p>
</div>
<!--Start ofFooter Bar-->
<!--
<footer class="footer pull-left navbar-fixed-bottom"> TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
<div class="container">
<div class="row">
<div class="col-sm-2">
<p>Copyright © Nathaniel</p>
</div>
</div>
</div>
</footer>-->
<!--End of Footer Bar-->
<script src="./assets/js/jquery-3.1.1.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/c1a4d3ec73.js"></script>
<script>
// This script enalbes the smooth scrolling of pages when clicking links on the Navbar
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
You need to apply the .navbar-default class to the navbar as well as change your id of id="navigation" to reflect the data-target, currently it's data-target="#navbar".
**Currently there isn't enough content to actually scroll so a generic height is set for example purposes.
Working Example: Open to FullPage
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
.navbar.navbar-default {
background-color: transparent;
border: 0;
}
.navbar.navbar-default .navbar-brand span,
.navbar.navbar-default .navbar-brand img {
display: inline-block;
}
section {
padding-top: 70px;
min-height: 750px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#navbar">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://placehold.it/20x20/000" alt=""> <span>Nathaniel D Alcedo Jr</span>
</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Projects
</li>
<li>About
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<section id='home'>
<h1>Nathaniel D Alcedo Jr,</h1>
<h2>aspiring web developer</h2>
</section>
<section class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <u>Calculator</u>
</p>
</section>
<section id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer. I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.
<br>
<br>My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby! It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently doing Free
Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to look for a job in this wonderful field we call software development.
</p>
</section>
</div>
<footer class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
</div>
<div class="col-sm-3">
<p>Copyright © Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Trademark ® Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
My question is a pretty straightforward one. I'm using Bootstrap 4.0 to make a website. I have a Carousel Element below which my Container begins. The Container consists of two Rows, one for the Footer and the other for the Columns that house my content. I'm trying to align the three columns side-by-side (like actual columns). Each Column consists of one DIV Element (Bootstrap Column Class); with one image and text below it image. This works fine when I set the size properties of the images in the index.html file. However, once I copy the same information into my custom CSS file, the columns become stacked. I'm pretty sure I'm calling the images with the correct Syntax in CSS. But its just not working. I'm attaching screenshots to give an idea of what I intent to do and what actually is happening.
Any sort of help would be highly appreciated.
Thank You.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel = "stylesheet" href="custom.css">
<title>AlphaGamigLeague</title>
</head>
<body>
<nav class="navbar nav-pills">
<a class="navbar-brand" href="#">
<img src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" width="100px" height="100px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" height="650px" width="400px" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1Rq95g-w1Dpr-pq9vuI4p9bVV2hHPHiIw" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Of Carousel -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover" width = "350px" height= "400px">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H" width = "350px" height= "400px">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" width = "350px" height= "400px">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "myRow2" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md">
sdasdasdasdasdasda
<br>
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
All rights reserved. No fhsofsei fhioyw39847 ryo8wrt 48wotr o3qwryy 9aw4ro87
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "myRow2Column2" class="col-md">
<br>
<!-- Instagram Icon DIV Begins Here -->
<div id = "instagram">
<img src= "https://drive.google.com/uc?export=download&id=1jiCKayOmqF5hk1FDrF9wAfiG2VYlHoki" width= "50px" height = "50px" align = "right">
</div>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Beginss Here -->
<div id = "twitter">
<img src= "https://drive.google.com/uc?export=download&id=1JhT0U6SXfrZ8jyKOUhbZoEs7kpQ7bdXp" height= "50px" width= "50px" align = "right">
</div>
<!-- Twitter Icon DIV Ends Here -->
<!-- Facebook Icon DIV Begins Here -->
<div id = "facebook">
<img src= "https://drive.google.com/uc?export=download&id=1ZGjOfBJHrzCrXeP3hoc2FsgCLFX41sq2" height= "50px" width= "50px" align = "right">
</div>
<!-- Facebook Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
CSS CODE:
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: black;
}
.navbar-toggler{
background-color: orange;
border-radius: 8px;
}
.navbar navbar-expand-lg{
background-color: aqua;
}
.collapse{
background-color: aqua;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black:
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color: pink;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow1Column2{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow2{
background-color: forestgreen;
height:auto;
}
#myRow1Column3{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#disclaimer{
width: 300px;
text-align: left;
}
#socialMediaLinks{
position: relative;
bottom: 30px;
}
#myRow2Column2{
margin-right: 40px;
margin-left: 100px;
}
#instagram{
position: relative;
right: 20px;
}
#twitter{
position: relative;
right: 40px;
}
#facebook{
position: relative;
right: 60px;
}
#myfirstImage{
width = 150px;
height= 400px;
}
#mysecondImage{
width = 350px;
height= 400px;
}
#mythirdImage{
width = 350px;
height= 400px;
}
#firstImage{
}
#secondImage{
}
#thirdImage{
}
#secondImage:hover{
opacity: 0.6;
visibility: visible;
}
Intended Layout. Works when image size dimensions are specified in index.html.
Actual layout. When image size dimensions are removed from index.html and added to the CSS file.
Remove fix width from the images and add the img-fluid class to them.
I mean, what exactly do you expect to happen when you set fix width on the images? Anyway, the first step is to remove the fix width and then, to make the images responsive, you add the img-fluid class.
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class="img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img class="img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img class="img-fluid" id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
</div>
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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 id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack
I have this site and my links to css and javascript is working but the problem is that the css are not applied on the site. also when i visit the link for my css the browser downloads the css and javascript file. I have tried Googles PageSpeed Insights and it said that
Eliminate external render-blocking Javascript and CSS in
above-the-fold content
My stylesheet is not working because of this.
Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php
this is the file structure of my site. I use Smarty Templating and Bootstrap on my site.
My templates are inside the view folder
Sample Code
index.php
<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();
$smarty->assign('title','Skyerp | Home');
$smarty->assign('year',date("Y", time()));
$smarty->display('index.tpl.html');
?>
index.tpl.html
{extends file='layout.tpl.html'}
{block name='nav'}
<ul class="nav">
<li class="active">Home</li>
<li>SkyERP</li>
<li>SkyPayroll</li>
<li>Manuals</li>
<li>Support</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
{/block}
{block name='content'}
<div class="row-fluid"></div>
{/block}
layout.tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title>
<link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
<link href="assets/css/docs.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {
<!--background-image: url('assets/img/skyerp_blue.jpg');-->
background-size: 80%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom;
}
</style>
<link href="assets/css/stickyfooter.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery.js"></script>
{block name="head"}{/block}
</head>
<body data-spy="scroll" data-target=".module-sidebar">
<div id="wrap" style="height: 100%;">
<div class="navbar 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="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
<div class="nav-collapse collapse" style="margin-top: 14px;">
{block name='nav'}{/block}
<!--<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 btn-primary">Sign in</button>
</form>-->
</div>
</div>
</div>
</div>
<div class="container">
{block name='banner'}{/block}
{block name='content'}{/block}
</div>
<div id="push"></div>
</div>
<footer id="footer" class="footer">
<div class="container">
<p>SkyErp © {$year}. All Rights Reserved.</p>
<p></p>
<p></p>
<ul class="footer-links">
<li>Blog</li>
<li class="muted">·</li>
<li>Issues</li>
<li class="muted">·</li>
<li>Changelog</li>
</ul>
</div>
</footer>
<script src="assets/js/bootstrap.min.js"></script>
{block name='script'}{/block}
</body>
`
What is the cause of the problem?
Is the problem on the server side or how i process my files?
What should i do to fix this?
I found a fix for this. I think the problem was on the server side. . My website runs on Windows Server. Under IIS Setting on custom MIME types , i added .css set mime type to text/css and .js set mime type to text/javascript. Haven't tried on Apache.
I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><i class="icon-home"></i>Home</li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Assembly Elections 2013</li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><i class="icon-th"></i>Constituecy</li><li ng-class="{active:section=='discuss'}"><i class="icon-time"></i>Election News</li><li class="divider-vertical"></li><li><i class="icon-bell"></i>Candidate</li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
Popular
</li>
<li>Trending</li>
<li>Latest</li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
This is handled by adding some padding to the top of the <body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just define an empty navbar prior to the fixed one, it will create the space needed.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
#media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
#media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
Hope this helps...
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the <nav> tag instead of <div> but i am not sure it would present any different behavior.
Using the page-header as a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-header gives you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</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 role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
If you are using Bootstrap 5 and want navbar at top then replace fixed-top with sticky-top.
Problem solved of hidden data under navbar.
i solved it using jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
Easy:
Code (JS)
document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});
StackOverflow throws an error due to the class navbar not existing.