Not a native English speaker so prepare for typos.
I was wondering why my nav and sidebar are being shown twice on my html page when i look at it in a browser.
So you'd know what I'm talking 'bout here's a screenshot:
Right now my main page looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schadedossier #yield('title')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://soshandyman.blob.core.windows.net/themes/bs4-insurance.css">
</head>
<body>
<!--wrapper(the thing around the sidebar and the nav)-->
<div class="d-flex" id="wrapper">
<!--sidebar-->
<div class="bg-light border-right collapse" id="sidebar-wrapper">
<div class="sidebar-heading">logo</div>
<div class="list-group list-group-flush">
Tussenpersoon
Woning
Schadedossier
Data schadedossier
Verzekeringsnemer
<button class="btn btn-outline-secondary">Contract raadplegen</button>
</div>
</div>
<div class="container-fluid p-0">
<!--page content-->
<div id="page-content-wrapper">
<nav class="navbar navbar-light bg-light border-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar" id="navbarSupportedContent">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" id="aangifte-tab" data-toggle="tab" href="#aangifte" aria-controls="aangifte">Aangifte</a>
</li>
<li class="nav-item">
<a class="nav-link" id="details-tab" data-toggle="tab" href="#details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="overzicht-tab" data-toggle="tab" href="#overzicht">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evaluatie-tab" data-toggle="tab" href="#evaluatie">Evaluatie</a>
</li>
</ul>
</div>
</nav>
<!--start tab content (here starts the nav aangifte and so on)-->
<div id="myTabContent" class="tab-content">
#yield('content', View::make('childAangifte'))
</div>
<!--end page content-->
</div>
<!--endsidebar-->
</div>
<!--endwrapper-->
<!--incert bootstrapscripts here-->
</body>
Then this is my child's code:
#extends('welcome')
#section('title')
aangifte
#endsection
<!--incert html-->
#endsection
Anyway I'm having trouble with this because this is not the only child i need to display but if this will form an issue every time then I rather want to know before I try to get the other ones to work.
Also what option would be better to use switch or if to go to the other children?
Thanks a bunch and sorry for the terrible formatting.
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
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm re-creating the Apple website as homework for a class.
Here is the GitHub repository: Repository. I used Bootstrap in it to get that Apple feel. Later on, I see that the navigation is centered.
Unlike mine
A friend of mine told me something position: relative and left: 50%
Update 1:
He told me to add position: relative; left: 50%; transform: translateX(-50%) to the ul tag. I tried it but it didn't work.
Update 2:
Turns out I didn't have the CSS file linked.
I have fixed your issue, replace your html with my code and keep your Css original.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>Apple</title>
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
</head>
<body>
<div class="Apple">
<nav class="navbar navbar-expand-lg navbar-light bg-dark d-flex justify-content-center">
<div class="d-flex">
<a class="navbar-brand" href="#"><img src="assets/img/apple.png" width="20"></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="#" style="color: white">Mac</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">iPad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">iPhone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Watch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Support</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://kit.fontawesome.com/35be2e4c40.js" crossorigin="anonymous"></script>
<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>
hey I am not that good at CSS but try this in a style tag or CSS file hope this works
ul{
margin:0 auto;
}
this will center that 'ul' in the navbar. if you want more space between each element then try adding
li{
margin-left:<anyvalue>%;
}
use flexbox utilities, in line 19 <div class="collapse navbar-collapse" id="navbarNav"> add this class justify-content-center too, you can test other flexbox classes:
<div class="justify-content-start">...</div>
<div class="justify-content-end">...</div>
<div class="justify-content-center">...</div>
<div class="justify-content-between">...</div>
<div class="justify-content-around">...</div>
<div class="justify-content-evenly">...</div>
for more information check this link flexbox-bootstrap
I'm newbie. I tried to move nav to the right and logo must stay in left side.
I dont why I tried all ways. i am using bootstrap 4.7 and 4.7 nav bar code in html. I tried all code. e.g: ms-auto, ml-auto, justify-content-end in ul class, but still cann't success.
Help me to sort out this problem. Please check attached .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- custom css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<div class="container-fluid grey">
<div class="row">
<div class="container pink">
<div class="row">
<div class="head-top pt-2">
<div class="col-md-6 pt-5">
<div class="logo">
<img src="assets/images/logo.png" class="logo">
</div>
</div>
<div class="col-md-6 green">
<nav class="navbar navbar-expand-lg">
<!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- <img src="assets/images/menu.png" class="menu-icon"> -->
</div>
<!-- head-top -->
</div>
</div>
<!-- container -->
</div>
</div>
<!-- container-fluid -->
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.logo{
width: 50px;
}
.menu-icon{
width: 30px;
}
.grey{
background-color: #8B8B8B;
}
.pink{
background-color: #EC8CBE;
}
.green{
background-color: #65D790;
}
It’s not clear what you were trying to do with the rows and columns for your navbar, so I started with a clean copy of Bootstrap’s 4.6.0 navbar.
If you want the menu items to be on the left, change the margin class on the unordered list from mr-auto to ml-auto.
And it’s best to put the active class on the list item, not the link.
.bg-pink {
background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<div class="container-lg">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I used a container-lg for the nav content so the logo and menu won't continue to spread out on larger screens.
As I understand it, you want the menu all the way to the right - next to the logo, but sticking to the right side? Right?
Well, I achieved this by putting the following css into the style.css file:
.pt-2 {
display: flex;
}
.navbar-expand-lg {
justify-content: flex-end;
}
The menu will be a bit above the height level of the logo, but you can play around with that if you want. Either raise the logo a little, or push down the menu.
If you wanna push down the menu using margin, i found that
margin-top: 42px;
was the right amount of pixels.
Hope it helped.
I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.
I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).
Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.
My code:
(a) included external files:
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b) style tag
<style>
body
{
position: relative;
}
</style>
(c) body tag
<body data-spy="scroll" data-target="#navbarko">
(d) navbar tag
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" 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="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e) beginning of the section tags throughout the page:
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
Many thanks beforehand for your time and help.
Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.
So you need to change your body tag to (note the 'bs', for Bootstrap):-
data-bs-spy="scroll"
More on this here:-
https://getbootstrap.com/docs/5.0/migration/#javascript
Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle.
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