I am pretty new to web development and trying to do my first site in bootstrap. I have everything working perfectly and suddenly my dropdown menu no longer works. Whenever I click the button, it glows like the action is taking place but the list items never appear. I even copied and pasted the template code from the bootstrap components page to test it out and that button also doesn't work.
Am I missing a style link in the head?
Here is the CSS and HTML I am using for the header, the only CSS I added to the drop down menu so far was to change the button color and border:
#header {
margin: 20px 20px 50px 20px;
padding-bottom: 10px;
border-bottom: #3d3935 solid 3px;
overflow: visible;
}
.navbar {
background: #d9d9d6;
padding: 15px 50px;
border-bottom: #3d3935 solid 2px;
}
#header #logo {
float: left;
padding: 0px;
margin-left: 5px;
}
#header #nav {
float: right;
font-family: 'Molengo', sans-serif;
font-size: 18px;
margin-right: -15px;
}
#dropdownMenu1 {
border: none;
background: #d9d9d6;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nate Delforge - Graphic Designer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//use.typekit.net/dpm0esa.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div id="logo" class="col-sm-6">
<img class="img-responsive" src="img/header/natedelforgeHeaderLogo.jpg" alt="Nate Delforge Logo">
</div>
<div id="nav">
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">MENU
<span class="glyphicon glyphicon-menu-hamburger"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#home">HOME</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#about">ABOUT</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#porfolio">PORTFOLIO</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="contact">CONTACT</a></li>
<!-- Adding an External Blog Later -->
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Thanks in advance for any help.
I'm pretty sure you need to load jquery before the bootstrap js as if I remember correctly, bootstrap relies on some of their classes
You should load them in this order. (please let me know if this worked for you. I tested and it seemed to work for me)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Related
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
I want to change the default background color of bootstrap dropdownlist and also the back color of its expanding menu. I had already tried it using my custom CSS, but it remains the same. below is my code
Html code
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<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.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#"><img src="images/vertex_logo.png" style="width:80px;height:80px">
</a>
</nav>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
</body>
</html>
main.css
.btn-primary{
background-color: #68889E;
}
.dropdown-menu{
background-color: #6ab446;
border: 1px solid #D9534F;
}
You need to include your CSS after the Bootstrap CSS. So you need to swap those two lines to read:
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css"><!-- AFTER Bootstrap! -->
This allows your code to override the Boostrap CSS, which is included first.
Also, what's with the lone i attribute in your <link> tag? It looks like a typo; I suggest you remove it.
You can also change any of the dropdown states:
.dropdown-toggle {
background-color: red;
}
.dropdown-toggle:hover {
background-color: green;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
background-color: yellow;
}
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>
I did implement a responsive navigation bar using html css. the text is all responsive but i got the problem in the flag images in my navigation bar. It is not responsive. Can someone help? Thank you. I just want my flag images to be position before the navbar-toggler-icon and not after the navbar toggler icon. This is the code . Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Logo Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='jquery.particleground.js'></script>
<script type='text/javascript' src='demo.js'></script>
<!-- Custom styles for this template -->
<style type="text/css">
.logo span {
height: 50%;
line-height: 50px;
float: left;
color: #fed136;
font-size:30px;font-weight:700;letter-spacing:0.1em;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
}
.logo {
line-height: 50px;
float: left;
color: #fff;
font-size:20px;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
font-weight:700;
letter-spacing:0.1em;
}
body {
padding-top: 54px;
}
#media (min-width: 992px) {
body {
padding-top: 56px;
}
}
#media (max-width: 578px){
.logo {
font-size: 10px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<div class="logo"><span>FASHION</span><br>CELEBRATE OUR FASHION</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
<a class="nav-link" href="#">INFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CART</a>
</li>
</ul>
</div>
<div class="langswitch"><img class="flag-australia"src="australia.svg" width="30px;">
<img src="south-korea.svg" class="flag-korea"width="30px;">
</div>
</div>
</nav>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This is the output that i only get
Move your menu toggle to after the langswitch div.
<button class="navbar-toggler">
....
<div class="langswitch">
Copy the flags div and past it before the menu (don't forget to give it another class)
after that make one of them display:none (depending of the media queries screen width)
but you can also make the button after the flags div
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.