I would like to know how I can have a sticky header? I have been figuring out that for the whole day and still don't know how to do. Can anyone help me for that? What I want is that when I scroll down, the header will keep sticking on the top.
These are my codes. Thanks a lot!
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</header>
</body>
You can wrap your div and nav with another div and set it's class like in the docs (navbar navbar-default navbar-fixed-top).
Like this:
body {
height:1500px;
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</div>
</header>
</body>
Try this
<nav class="navbar navbar-fixed-top">
Click here for bootstrap proper navigation
Have a look
body{height:20000px}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<nav class="navbar navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bo Kei Tuck Shop</a>
</div>
<ul class="nav navbar-nav">
<li>Hot Food</li>
<li>Cold Food</li>
<li>Snacks</li>
<li>Drinks</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
</body>
Related
I want to make a progress bar using Bootstrap that has some dots on that progress bar as in the image below. How can I do that? Or where exactly should I research?
.progress {
width: 278px;
height: 7px;
left: 597px;
top: 489px;
}
.progress-bar {
background: #007BFF;
border-radius: 100px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-body">
<div class="justify-content-center">
<div class="progress" style="width: 100%">
<div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try using range bars
https://getbootstrap.com/docs/5.1/forms/range/
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<label for="customRange1" class="form-label">Range bars</label>
<input type="range" class="form-range" id="customRange1" />
</body>
</html>
The font size of 'Flavoroso' doesn't change for any value of font-size. Can anyone help me fix this please?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
</div>
</body>
</html>
CSS
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
}
In the head tag, try linking first bootstrap then the google font and then your css file. The order matters a lot, always link css last.
Your code should be like this.
<!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">
<!-- 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">
<title>Hello, world!</title>
<style>
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
}
</style>
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
<!-- 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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
</body>
</html>
Let me know if this will work for you.
your code seems to be fine . problem may due to improper css import. Use this instead.
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 3rem;
color: rgb(29 28 28);
}
</style>
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
</div>
</body>
</html>
I believe there is a conflict between bootstrap and your local styles. You could add a class attribute to your heading tag and use the class name to style (in order to increase the specificity).
Code Example
/*overriding bootstrap style by using a class name*/
.anyClassName {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
font-size: 7rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<!-- Adding class name of your preference here -->
<h1 class="anyClassName">Flavoroso</h1>
</header>
</div>
</body>
</html>
I want to make sub menu under the Accounts button. I want the sub menu to show when I hover over Accounts button. I tried this but it doesn't work:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
Home
About
<a class="acc" href="acc">Accounts</a> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<a class="hide" href="face">-Facebook </a>
</div>
</body>
</html>
So I want to change Account to a button that when it is hovered over, it shows me the Facebook link, and I want to add a Twitter link downside the Facebook.
CSS:
.acc {
font-family:'Courier', arial;
color:black;
font-size:3em;
text-decoration:none;
text-align:center;
overflow:hidden;;
}
.hide {
font-family:"Courier";
color:black;
font-size:3em;
display:hidden;
position:relative; top:45px; right:234px;
overflow:hidden;
}
Is this what do you want to achieve?
.subnav{
display: none;
}
.topnav li:hover .subnav{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>About
<ul class="subnav">
<li class="acc">Accounts</li> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<li class="hide">-Facebook</li>
</ul>
</li>
</div>
</body>
</html>
I would highly recommend you to learn something about CSS selectors and especially about :hover.
If I open it through a pc browser it will be responsive but when I change it to a tablet or smartphone view it does not become responsive, instead it becomes zoom (should zoom in if view). how to solve it?
Here its my code :
.modal-dialog{
padding-top: 100px;
border-radius:0;
}
.modal-header{
background-color: #F47321;
}
.modal-title{
color: white;
}
.modal-footer{
background-color: #FFFFFF;
margin-top: 0;
}
.modal-body{
background-color: #FFFFFF;
color: black;
}
.orange{
background-color: #F47321;
}
.grey{
background-color: #807874;
}
.title-header{
background-color: #F47321;
}
.body {
background-color: #807874;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family:'Elivio',sans-serif;
font-size:100px;
div{
font-family:Elivio;
}
</style>
<title>Selamat Datang</title>
<body class="body">
<div class="content">
<div class="container">
<br>
<div class="modal-header">
<h4 class="modal-title" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
</div>
<div class="modal-body">
<p style="font-family:MavenPro-Regular;"><strong></strong><strong>SYARAT DAN KETENTUAN</strong></p>
<p> </p>
</div>
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
</label>
<br>
<p ><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
</div>
<form method="POST" action="pengajuan" align="">
<input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
</form>
</div>
<p align="center"><font color="white">© Rumah Zakat 2018</font></p>
</html>
let me know if there is a wrong code, because men are always wrong whoops ...
You need to add the viewport <meta> tag to your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
...Note that you'll also need to add the <head> section itself (you appear to have omitted it):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family: 'Elivio', sans-serif;
font-size: 100px;
div {
font-family: Elivio;
}
</style>
<title>Selamat Datang</title>
</head>
<body class="body"> ... </body>
</html>
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}