I have 4 pages that refer to each other on a navbar (index2.html/seite1, seite2, seite3.html).
I'm trying to find a page to highlight the current page on the navbar, but I only manage to do it for a split second. It turns red when I click but immediately to the default "Home".
I've been stuck on this for days and I can't find the problem. Is there a loop on the tag that I don't see? Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar-dark .nav-item > .nav-link.active {
color:white;
background-color: red;
}
</style>
</head>
<body>
<div>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" style="padding-left: 0px;" href="index2.html">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="seite1.html">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite3.html">Page 3</a>
</li>
</ul>
</nav>
</div>
<script>
$('.navbar-nav .nav-link').click(function(){
$ ('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
if it is just HTML without any server-side rendering, then you have 4 different HTML files. In the Home page, only the home tab must have active class, in seite1 page only the seite1 tab must have the active class,..etc
Related
My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>
Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I am trying to make a webpage using Bootstrap. I am using .container-lg so that the content get 100% width when max-width is 767px. But is it not getting 100% width on screens with width less than 768px.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 09 - Panda Ecommerce usign Bootstrap</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- My Custom CSS Link -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="Panda-ECommerce-Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backpack">Backpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Bootstrap JavaScript CDN-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
How to fix this problem?
How can I get 100% width on screens less than 768px?
in Bootstrap we have this CSS style:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
for getting 100% width you should remove the padding, so you should use padding: 0 in your CSS style
I hope this solve your problem
Fixed this with the code below (SASS) so we can keep the padding.
/* Fix for bootstrap container */
.container-lg{
#include media-breakpoint-down(lg){
width: auto;
}
}
I am unfamiliar with javascript but I would like to change the color of my navbar icon. Right now, my navbar is black color with white navbar icon. When I scroll the page, my navbar changes background color to white and the font color changes to black. However, the navbar icon is still white so it disappears when I scroll the page. I can fix this by changing the navbar class from 'navbar-dark' to 'navbar-light'. However, I am not sure how to do this using javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.navbar{
background-color: black !important;
}
div.navbar.scrolled {
background-color: white !important;
}
div.navbar.scrolled .navbar-brand{
color: black !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-dark navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass('navbar-dark');
$("div.navbar").toggleClass('navbar-light');
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
});
</script>
</body>
</html>
You can toggle dark and light based on the scroll possition
$("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.navbar{
background-color: black !important;
}
div.navbar.scrolled {
background-color: white !important;
}
div.navbar.scrolled .navbar-brand{
color: black !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-dark navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
$("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);
});
</script>
</body>
</html>
I have index.php, page1.php, page2.php, page3.php and I wanted to load their content in the index.php page within the div with #output but I don't want them to reload/refresh every time the navbar is clicked. Also, I want the active page has the active class in the active <li>.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page1.php">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.php">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.php">Page 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid" id="output">
THE CONTENT FROM ANOTHER PAGE THAT'LL LOAD HERE
</div>
</div>
</body>
</html>
Thank you
Consider this example:
HTML:
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Live demo: http://jsfiddle.net/BoWw/77dyfbwd/
You can adjust this to what you posted.
Need a help wit nav bar elements.
I've got a problem changing Navigation Bar items style.
I want to change the text color from a default blue. Also, change hover color to the red one.
Changing nav-item parameter doesn't work.
I wonder what parameter need to be changed.
Thank you in advance.
Here is the code:
.nav-item {
color: #e0e0e0;
font-family: 'Open Sans', sans-serif;
}
font-family: 'Open Sans', sans-serif;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<!-- Symbols coding -->
<meta charset="utf-8">
<!-- Window change, depends on the screen resolution -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Connecting Fonts library -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Connecting Bootstrap styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Connecting personal style file(style.css) -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Container to center navbar on the page and to center content in the navbar -->
<div class="container">
<!-- Centered navbar, which become vertical on a small screen -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" style="background-color: #313030;">
<ul class="navbar-nav">
<!-- Active - highlight the current link -->
<li class="nav-item active">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JS Bootstrap scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You need to apply the style on nav-link element instead of the nav-item.
.nav-item .nav-link {
color: #e0e0e0;
font-family: 'Open Sans', sans-serif;
}
.nav-item:hover .nav-link {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<!-- Symbols coding -->
<meta charset="utf-8">
<!-- Window change, depends on the screen resolution -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Connecting Fonts library -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Connecting Bootstrap styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Connecting personal style file(style.css) -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Container to center navbar on the page and to center content in the navbar -->
<div class="container">
<!-- Centered navbar, which become vertical on a small screen -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" style="background-color: #313030;">
<ul class="navbar-nav">
<!-- Active - highlight the current link -->
<li class="nav-item active">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JS Bootstrap scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
.nav-item a {
color: #e0e0e0;
font-family: 'Open Sans', sans-serif;
}
.nav-item a:hover{ color:red;}
use anchor tag for changing color