My cart icon in the navbar toggle is not showing up when I go into a smaller display.
I am using bootstrap 5 for the navbar, I can click on the bottom of the toggler and it brings me to the my cart page but I can't see the actual icon.
Anyone have an idea on how I can fix this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="container">
<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">
Meat
<ul class="navbar-nav">
<li class="nav-item px-4">
Fruits & Vegetables
</li>
<li class="nav-item px-4">
Dairy & Eggs
</li>
<li class="nav-item px-4">
Snack
</li>
<li class="nav-item px-4">
Drinks
</li>
<li class="nav-item px-4">
Bakery
</li>
<i class="bi bi-basket2-fill h2 cart-color"></i>
</ul>
</div>
</div>
</nav>
<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>
your cart icon element is exist but on a tablet, the size would go out of range of the screen.
you can fix this issue by trying to use one of these methods :
1 - try to re-responsive the navbar (with bootstrap you can use COl styling)
for this method try to read grid doc from the bootstrap website: https://getbootstrap.com/docs/5.1/components/navbar/
2 : you can give the icon "position absolute".
but I won't suggest this method because it is not so professional.
Related
I am essentially trying to create active classes with Bootstrap to display a nav-pill/container around the active section of my webpage. This works fine on larger screens, but on smaller screens, with the hamburger menu active the nav-pill stretches across the entire div/container, but I want it to wrap around only the word similar to when it is a large screen.
Here is a codepen with some filler content to mimic my issue: https://codepen.io/100emoji/pen/mdxdpzp
and the code for the navbar only:
<!-- Bootstrap-5 -->
<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://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="400" data-bs-smooth-scroll="true">
<!-- Navigation Bar-->
<nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
<div class="container">
Ken's Art & Frame
<button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon mid-bar"></span>
<span class="toggler-icon bot-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav nav-pills ms-auto">
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Artwork
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
I can only find solutions using bootstrap 4 through google
https://getbootstrap.com/docs/5.0/components/navbar/#containers
I think this is what you are looking for. Essentially you wrap a container around your UL to control the size.
The other option is to use the bootstrap width classes on each individual <li> like this:
<li class="nav-item w-50">
Or do it via CSS on <li> tags:
li {
width: 30%;
}
I can't find information on how to use bootstrap to place all subsequent div lower than header.
I have it written like this:
<header className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a className="navbar-brand px-3 fs-4" href="/">Todos</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link fs-4" to="/about">List <span className="sr-only"></span></Link>
</li>
<li className="nav-item active px-3 fs-4">
<Link className="nav-link" to="/homepage"> Add <span className="sr-only"></span></Link>
</li>
</ul>
</div>
</header>
And now that I have added a button to this page it appears in the upper left corner, not below. There is also an overlap if I go to another page . Since I am new to this, I will be glad to help.
<div className="mbtn">
<button onClick={() => setType('books')} className="btn btn-outline-primary">Пользователи</button>
</div>
Two issues:
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
In CSS classes nothing else just background color only so nothing in css file anything.
Any help or suggestions
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg core-header navbar-light">
<div class="container">
<a href="#" class="navbar-brand"> <img class="image_size" src="/images/logo1.png" alt="Logo">
</a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
<div class="navbar-nav">
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"><i class="fab fa-youtube text-white"></i></a>
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"></a>
</div>
</div>
<div class="reserve">
<a target="_blank" class="button bg-white reserve-table" href="#">Reserve a Table</a>
</div>
</div>
</nav>
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so.
Solution
add class ml-auto to <div class="navbar-nav"> which will move social icons to right side.
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
Solution
The reason that is happening because 'container' is flex container and when navbar-collapse div is shown (which has 100% width) expands and takes space which falls the reserve button. So you need to remove 'remove button' div within <nav> and keep it next to <nav> tag and style accordingly.
Hope this helps.
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.
I am trying to add a button when my navbar collapses on smaller screen sizes. I can see the button exists in developer tools, however i cant see the hamburger icon, nor am i able to click the button to expand and collapse it. I am trying to acheive this using Bootstrap.
<nav class="col-6 col-md-6 navbar navbar-expand-sm">
<button class='navbar-toggler ml-auto' type="button" data-toggle='collapse' data-target='#navBarDropdown' aria-controls="navBarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class='navbar-toggler-icon'></span>
</button>
<div class="collapse navbar-collapse" id='navBarDropdown'>
<ul class=" navbar-nav mr-auto">
<li class="list-inline-item nav-item mr-2">Home</li>
<li class="list-inline-item nav-item mr-2">About</li>
<li class="list-inline-item nav-item mr-2">Gallery</li>
<li class="list-inline-item nav-item mr-2">Contact</li>
</ul>
</div>
</nav>
You should add the jquery and bootstrap in correct order.After adding it,hamburger menu is working perfectly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>