This will be lot's of typing involved.
I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields
At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)
Just giving an example of one of the menus
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navigation Menu</title>
<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
<script src="Libs/Popper/popper.min.js"></script>
<script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">
<a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
<!-- Carousel -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-navbar" id="main-navbar">
<ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
<li class="nav-item">
<a class="nav-link" href="#">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">UNTERNEHMEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEWSROOM-STORY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPOTLIGHT:TECHNIK
<?php //echo $spotlight; ?>
</a>
</li>
</ul>
<ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
<li class="nav-item">
<a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
</li>
<li class="nav-itemv">
<a class="nav-link text-danger" href="#">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATENSCHUTZ</a>
</li>
<li class="nav-itemv">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
<!-- Language Menu -->
<ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
<li class="nav-item">
<a class="nav-link" href="#">DE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
And the extra css is as follows
.smaller_font{
font-size: 80%;
}
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
At the moment I am trying to use #include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.
The idea is that the fields in the menu are going to have 1px bottom border.
I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working
or setting width in pixels with "#media" tag but using "#include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).
I need someway to get things to work on small scale, so that I can build from there :-)
"At the moment I am trying to use #include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."
This isn't CSS...
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.
Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.
Related
This question already has answers here:
How to center nav-items in Bootstrap? [duplicate]
(3 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I have two navbars, one of which I want the text centered, but I'm having trouble understanding why I am unsuccessful in doing so. I am new to navbars in general as well as bootstrap, so I apologize If my mistake is obvious. Is it something I should be implementing in the bootstrap end, or is it something that can be addressed within the <style> tags? Thanks.
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item active">
<a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
</li>
</ul>
</nav>
IMO, Bootstrap is unnecessarily hard. I use raw CSS JS and HTML, but I'll try to help.
Bootstrap has this example on their site:
<ul class="nav justify-content-center">
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
That should be what you're looking for.
You could also implement a navbar in raw HTML/CSS/JS:
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="index.css">
<title>Navbar</title>
</head>
<body>
<navbar>
<button onclick="window.location.href = '#'" class="active">Something</button>
<button onclick="window.location.href = '#'">Something else</button>
<button onclick="window.location.href = '#'">A third thing</button>
</navbar>
</body>
</html>
/* index.css */
navbar {
width: 100%;
height: 10%;
background-color: #d4d4d4;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
}
navbar>button {
color: #00ccff;
}
navbar>button.active {
color: #00ccff;
}
Lets say that i have a navbar with a brand text and 3 links like so:
PetesPCworld | Hardware | Software | Support |
Using this example: If i click on lets say "Hardware" then everything is okay, i can use the Brand text (PetesPCworld) to go back to the home page, but if i do this once again, lets say i click on the "Hardware" again, then i cant go back to the homepage using the Brand text.
And by default you start at the home page (duh..)
HTML CODE:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Peter">
<title>Számítógépes Hardver</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="main-style/main-style.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.2/js/bootstrap.min.js"></script>
</head>
<!-- W A R N I N G !!!! --------------- W A R N I N G !!!! -->
<!-- This is basically a school project, and in no way i'm a professional ! -->
<!-- Oh boi, this is some fine spaghet.. -->
<body>
<div id="nav-container" class="jumbotron text-center" style="margin-bottom:0">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- I think the problem is here with this <a> tag. -->
<a class="navbar-brand" href="#home">Számítógépes Hardver</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav">
<li class="nav-item">
<a class="nav-link" href="#MOBOandCPU" data-toggle="tab">Alaplapok, CPU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Memory-Types" data-toggle="tab">Memóriák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bővítőkártyák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Monitorok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nyomtatók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lapolvasók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Háttértárak</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kábelek</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mutató Eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Multimédiás eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hordozható Adattárolók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Elavult Technológiák</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div id="header-container" class="jumbotron text-center" style="margin-bottom:0">
<h2 id="header">Számítógépes Hardver</h2>
</div>
</div>
<div class="tab-pane" id="MOBOandCPU">
<p>dancing polish cow</p>
</div>
<div class="tab-pane" id="Memory-Types">
<p>dancing ukranian toilet</p>
</div>
</div>
</body>
</html>
CSS Code
#nav-container{
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#header{
padding: 1%;
}
#header-container{
padding: 0px;
margin: 0px;
}
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 cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)
I'm creating a webpage, I want to be able to do a header for each page
I want it to consist of
(An Image) Home news about us web call email
I have this code so far:
<!DOCTYPE html>
<html>
<body>
<nav class="navbar navbar-light bg-faded">
<img src="jazz.jpg" alt="HTML5 Icon" width="250" height="100">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">news</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">web</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">call</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">email</a>
</li>
</ul>
</nav>
</body>
</html>
However, I just get the image and the rest are under the image, how can I put them all next to each other and make the header background gray? Is there anyway to solve this issue??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>News</li>
<li>About Us</li>
<li>Web</li>
<li>Call</li>
<li>Email</li>
</ul>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
So this code will give you the header you are looking for. You can add an image in the header if you want still, but you will have to play around with the styling to make it look good. Let me know if you have any questions or need anything clarified. Hope this helps!
You can use display for this. display:inline or a newer version display:flex
Just add some css styling to your HTML to achieve your goal.
Play around with this JSfiddle:
https://jsfiddle.net/ry3hgrtq/
I added these classes to your html.
.navbar img {
display:inline;
float: left;
}
.navbar ul {
list-style-type: none;
}
.navbar li {
display: inline;
padding: 2px;
margin: 2px;
}