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
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 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
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 would like to built a basic website.
Î’elow I have the nav.html document where I have designed a basic dropdown menu. When I open the nav.html with the browser the toggle button works fine, when I click on it,dropdown menu collapses and
when I click on it again drop-down disappears.
The problem appears when I include nav.html in a home.php file.
When I click on the toggle button, dropdown-menu collapses, but when I click on it again dropdown-menu remains open and doesn't disappear.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<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.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.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>
<meta charset="utf-8">
</style>
</head>
<body>
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
home.php
<html>
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<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.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.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>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<?php include('./nav.html'); ?>
</body>
</html>
You are including HTML in HTML and this is not supported. As you are including nav.html into home.php, you want to remove tags body, html and completly head.
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
PHP and HTML are completly different languages. With PHP you are generating HTML content. You are not including "the result" of nav.html, but the code.