I am unable to open the navbar options, it's just a solid button and forms somewhat of a ring around it when clicked.
I had tried some various solutions including adding and removing the scripts, changing the navbar attributes, etc
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pan Indus Exim Enterprises</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<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">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ab">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#con">Connect</a>
</li>
</ul>
</div>
</div>
</nav>
At first, make sure your computer is connected to the internet. This to ensure the CDN loaded and saved by your browser.
Secondly, open the Developer tools ctrl + shift + i (chrome keyboard shortcut) and check on the tabbed console there is no error. If there have an error message, please fix it first (the most problem is the CDN link is not work or there is a typing error).
If Navbar on mobile is still not collapsing, please clear your browser data ctrl + shift + del (chrome keyboard shortcut) and reload the page.
Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>
It is working just make sure you have JavaScript cdn and a proper browser like Chrome, sometimes bootstrap does not support other browsers. Also make sure you are connected to Internet Especially when you are Cdn.
Related
I've literally just copy pasted another page that is working completely fine, but when i use the SAME code (that works fine on all other pages) i get this error on the new one i created.
2893:1 Refused to apply style from 'http://localhost:8080/myleads/style/csspricing.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
2893:13 GET http://localhost:8080/myleads/images/superleadslogo.png 404
2893:49 GET http://localhost:8080/myleads/images/logoinv.png 404
The page body is empty, but the problem occurs when i add the header and body
pic of the error:
This is my code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Mer Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/css.css">
<link rel="stylesheet" type="text/css" href="style/csspricing.css">
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" style="border-bottom: black; -webkit-box-shadow:0px 1px 1px #cdcdcd;
-moz-box-shadow:0px 1px 1px #cdcdcd; box-shadow:0px 1px 5px #cdcdcd;">
<img alt="logo" src="images/superleadslogo.png">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon myToggler"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin: auto;">
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/home">HEM</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/priser">PRISER</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/produkt">PRODUKT</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/faq">GUIDER & FAQ</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/kontakt">KONTAKT</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/avtal">AVTAL & VILLKOR</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/svle">HÄMTA LEADS</a></li>
<li class="nav-item ml-5"><a style="color:black;" class="nav-link" href="/myleads">MINA LEADS</a></li>
</ul>
</div>
</nav>
</head>
<body class="body">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
<div th:replace="footer :: myfooter"></div>
</html>
Anyone know what is causing this? The code works perfectly fine on all other pages except this one...
Several issues with your code:
All content of a webpage must be inside body. You have the navbar in the head section, which is not allowed.
<div th:replace="footer :: myfooter"></div> is not allowed at that place, it must be inside body element.
Unlike the error message you represented textually, the image you included states a different path:
Refused to apply style from 'http://localhost:8080/myleads/.style/csspricing.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'http://localhost:8080/myleads/style/csspricing.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Notice the difference between .style and style.
Your console screenshot also suggests that your images have a pathing issue.
Suggestion: Please try and prefix all your paths with ./. That will probably not fix the issues, but it's the paths that cause these problems, also most likely for the stylesheets, resulting in JSON being sent (probably an error message) by the server.
Use the network tab of your browser's developer tools to check for what the server actually sends.
The problem was because i was passing a pathvariable like this
#GetMapping("/myleads/{id}")
public String showCompanyMore(#PathVariable(value="id") long id, Model model) throws SQLException {
Optional<UserLeads> userlead = userLeadsRepo.findById(id);
userlead.get().setLastSeen(returnDateWithTime());
userLeadsService.save(userlead.get());
model.addAttribute("company", getUserLeadSingleToTable(id));
return "showmore";
}
i swapped
<link rel="stylesheet" type="text/css" href="style/css.css">
to
<link rel="stylesheet" type="text/css" href="/style/css.css">
and the other linked files like javascript
I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.
Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.
I am currently teaching myself web based languages and I am a bit stuck on my bootstrap/html code. Currently I am running into some trouble with bootstrap. I am trying to make a navbar and I have copied code I found online and pasted on Atom and then ran the local site.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>testing</title>
<meta charset="utf-8">
<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>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="\Users\sealc\.atom\Web Dev\testing\pagethree.html">page three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagetwo.html">Page two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagefour.html">Page four</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
</body>
</html>
it works when I fiddle with it on codeply, but when I try to run the local site I keep getting this:navbar
It is probably an easy fix, but I am no expert, I already tried using different links for bootstrap an I copied the template on their website, but nothing changed
I tested your code on my environment the link might not work. I changed the link and it worked again. Here it is:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
Check the conflict something like:
How many .JSFile Version you are using?
If you have A master page i guess that is the cause. (Cause by the other pages)
To Resolve:
Try to comment some other .JS and run to check the cause.
May check also your .CSS using inspect element.
By Forcing the style you want or to By pass the old css, you can add in your style !important to the affected area.
Like for Example:
<style>
.sampleclass{
color: red !important
}
</style>
Hello #Jacob Dubois I have check your code. Your code is perfect but bootstrap css has a problems. Please use this bootstrap latest version. For Example :=> https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
I have been working on a site using the Download ready-to-use compiled code for Bootstrap v4.1.3 provided on the bootstrap page, and after reading how to work on the nav and the buttons I have stumbled into a problem.
below of my meta tags I have the css links
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only fix I have for the button that I have in the body bellow all the other code but on the nav the code button tag does the same for the code of a tag
From the navbar the only one that has given me a problem is Placeholder that is between the atags same with the code below and that is when I hover over the button it gets smaller and that changes the height of the navbar when I hover it, link works fine and all is just that the hover, also the same happens when I use the code for the button on the Navbar provided by bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
the button on my code works but the a with role=button on another page does the same as the nav.
Don't know if I fully explained my issue or is easy to understand, also the code I been using is on the documentation of the Bootstrap site, also for the navbar if I don't put fixed-top on the class it leaves a white space at the top of the page I put the following code on menustyle.css but it didn't fix it, is there another way to remove the white space without the need to use fixed-top in the nav class?
header{
margin:0px;
}
body{
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">nav-bar</a>
</div>
<ul class="nav navbar-nav">
<li class="active" title="home">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
Hey, this is the working snippet for nav bar . Please show us the issue which you're facing
I'm new to HTML and CSS and I encounter a problem that I just can't figure out. It has happened before in other attempts but in this case I was trying out bootstrap. So I don't think that there's the problem (in every case, my style.css file crushes the css files used for bootstrap).
So here are the facts. I want to create a logo that, when hovered, changes appearance. My css file is linked because the background colors does appear. The hover option works fine too. I must have forgotten something or lack some knowledge.
This question is frequently asked but I haven't found any answer able to help me.
, in case you want to check it out yourself and my files
.mclogo {
width: 45px;
height: 45px;
background-image: url('./pic/LogoMc1.png');
background-color: red;
}
.mclogo:hover {
background-color: blue;
background-image: url('./pic/LogoMc2.png');
}
<!doctype html>
<html lang="en">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./public/style.css">
<title>Server :: le rôle-play sur minecraft</title>
</head>
<body>
<!--- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="https://minecraft.net/en-us/"><div class="mclogo"></div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Accueil</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Où suis-je ?</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Le serveur</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Nous rejoindre</a></li>
</ul>
</div>
</div>
</nav>
<!-- 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>
Thanks in advance.
try removing the "." out of your file path on your css. In order for relative paths to work on CSS and HTML, you need to make sure it follows standard file notation
Can you view your image in the browser at the address you are specifying? In other words, does typing www.yourwebsite.com/pic/LogoMc1.png into your browser's address bar bring up the image?
If not the path is wrong.
If your browser does find the image at that address, try using the absolute path in your CSS declaration. If that doesn't work, you must be overriding these declarations somewhere later in your CSS file.