I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.
body{
background: rgb(27, 25, 25);
}
.btn{
border-radius: 3em;
}
<!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>Adam Farrow </title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-xxl">
<a href="#" class="navbar-brand">
<span class="fw-bold text-secondary">
Adam Farrow
</span>
</a>
<button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link " href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
As you can see if you run the code, it will have the items slightly unaligned.
I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.
use padding-bottom or padding-top : 2px to position your github link
Related
my scrollspy isn't working properly. It starts at home and can scroll down but when scrolling back up all tabs highlight except the "home" tab when you scroll all the way up. Additionally I've tried to include the data-bs-offset= "100" in my body tag but that has no effect on the scrolling. The tab changes to the next too early so I wanted to fix this with data-bs-offset. I'm pretty sure i've included the necessary cdn links for the css and js from the bootstrap website. Any suggestions?
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/8caef0b63d.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Tatyana Chalik</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true">
<!-- navbar -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-lg-3 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="resume.html">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
<header id="home">
<h1> hi </h1>
</header>
<main>
<div class="container" id="about">
<h2 class="pt-5 pb-4 text-center">About Me</h2>
<p class="pt-5 text-center"> jsdklajsdfljsdalkfjsdljflsdjflsdfljdf </p>
</div>
<div class="container" id="projects">
<h2>hi2</h2>
</div>
<div class="container contacts" id="contact">
<h2 class="text-center pt-5 pb-3">Contact Me</h2>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
Hello I found some similarity case with your case. And I try to help you with send the link below. You can read and choose the one which the case is close to your case. Thank you, hope it can help you. bootstrap offset scrollspy not working or How do I set the offset for ScrollSpy in Bootstrap? or this one data-offset in Bootstrap Scrollspy is not offseting at all
Can I customize following breakpoint using bootstrap ?
Code :-
<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
<a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
<div class="fixed-nav">
<ul class="navbar-nav ">
<li id="nav-1" class="nav-item ">
<a class="nav-link" href="#">AAAAA</a>
</li>
<li id="nav-2" class="nav-item">
<a class="nav-link" href="#">BBBBB</a>
</li>
<li id="nav-3" class="nav-item">
<a class="nav-link" href="#">CCCCC</a>
</li>
</ul>
</div>
</nav>
But when I override this by adding,
#media screen and (min-width:633px) and (max-width:1072px) {
.collapse {
display: none !important;
}
}
to its style.css. Then navbar collapses at my custom breakpoint (1072px). But still hamburger icon appears when it reaches to -lg (≥992px) . So I need to know is, is there any method to collapse at custom width also appearing the hamburger icon.
Thanks !
If you give lg , sm, xs or xl after navbar-expand class navbar expands automatically by it's custom value. For example if you write navbar-expand-lg value to the nav class it collapses at 992px width or if you give navbar-expand-md it collapses at 768px. You can inspect codes below . I hope it works for you.
button.navbar-toggler {
background-color: white;
}
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<nav style="background-color: black;" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">AAA</a>
<a class="nav-link" href="#">BBB</a>
<a class="nav-link" href="#">CCC</a>
</div>
</div>
</nav>
</body>
</html>
<!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">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!--Font awesome icons-->
<script src="https://kit.fontawesome.com/4e9b2916e9.js" crossorigin="anonymous"></script>
<!--Google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Bakery</title>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white p-2 h5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="No solo pan y café logo brown">
</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 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<div class="d-flex me-lg-5 mx-auto">
<ul>
<li><span class="social-icon social-facebook"><i class="fa fa-facebook"></i></span></li>
<li><span class="social-icon social-google"><i class="fa fa-google"></i></span></li>
<li><span class="social-icon social-tripadvisor"><i class="fa fa-tripadvisor" aria-hidden="true"></i></span></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!--Main-->
<section>
</section>
<!--Js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
It's my first post here so here goes nothing!
I'm in the process of learning html/css and right now I'm stuck on Bootstrap 5 background image.
I try to set it on the whole body, but the problem is it shows only a part of the image, the rest should be there when I scroll down but I can't scroll anything.
Here's the screenshot of the website, as you can see, a lower part of the background is missing, I should be able to scroll down but it just won't let me. Who would've thought a background image is such a pain in the neck in Bootstrap.
What am I doing wrong? Please be gentle! Thanks!
Website screenshot Website screenshot
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
}
You should use background-attachement, not background-position.
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Source: Mozilla MDN on background-attachment
Wrap your .row with .container or .container-fluid and it will solve the issue.
And if it won't scroll in mobile view you can make sure to use the meta tag in your head tag
I was designing a bootstrap navbar with a YouTube logo. Instead of aligning to right it is awkwardly placed in center. It seems the width of anchor is more than the size of image as result the image is pushed to right. How can I move it to right.
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
.yt-img-a{
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
enter image description here
Instead of setting the image width to 6%, use a px value such as 30px.
.yt-img{
width: 30px;
position: relative;
}
Demo
The ms-auto class makes your ul to be placed on the right side.
<ul class="navbar-nav ms-auto"> // ms-auto removed
Codepen Link: https://codepen.io/emmeiWhite/pen/JjRMxQw
Have fixed that and also added flex-grow:1 where ever needed :)
Full Code:
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item flex-grow-1">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt="Image Here"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Here is the code for reference, and a link to the codepen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Parallax Website</title>
</head>
<body>
<!--Navbar-->
<div class="container-fluid">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="#"><i class="fas fa-user-circle"></i>Business Website Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navi">
<ul class="nav 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 Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
Everything seems to be working well but for some reason when the screen is decreased in size, the "hamburger" is not displaying any list items when clicked.
Additionally, there's a really annoying small white margin at the bottom that I can't seem to get rid of no matter how many margin:0s I place. Ugh.
Use the correct version of Bootstrap 4 JavaScript (not 3.x). The Codepen is using Bootstrap JS 3.x so the Navbar toggler won't work.
To remove the margin on the footer, remove the bottom margin (mb-0) from the paragraph (<p>)...
<footer>
<div class="container-fluid footer">
<p class="feetText mb-0">
Copyright 2018 © Payton Jewell
</p>
</div>
</footer>
https://www.codeply.com/go/xipKGoGnkU