I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg
Here is how I copied the code:
CSS
JS
HTML
Please provide me with guidance on what to do next, as I am just starting out and eager to learn. Thank you!
This snippet of code isn't compatible with Bootstrap 4. Make sure to include the correct CSS and JS links.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.image {
background-color: #490D40;
background: url(https://sonorangirl.github.io/Earth-Quotes/img/google-earth-view-South-Iceland3.jpg) no-repeat center center;
background-size: cover;
height: 570px;
margin-top: -20px;
}
.image .heading {
color: white;
text-align: center;
padding-top: 200px;
}
.image p {
text-align: center;
padding: 20px 60px;
}
.image p .btn {
background-color: transparent;
color: white;
border: 1px solid white;
padding: 10px;
font-size: 1.2em;
}
.image p .btn:hover {
color: #C57ED3;
border-color: #C57ED3;
}
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-brand:hover {
color: #C57ED3;
border: 1px solid #C57ED3;
}
// etcetera (omitted for brevity)
.about {
background-color: #C57ED3;
color: #490D40;
height: 600px;
text-align: center;
margin-top: -20px;
min-height: 200vh; // This line is optional for testing purposes
}
.about h2 {
padding-top: 220px;
}
.about p {
padding: 20px 80px;
}
</style>
// The rest of the HTML content and scripts remain unchanged from the original source.
The use of `min-height: 200vh;` by the `.about` class is provided as an option for testing purposes.
I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...
I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...
My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...
I am working on creating my very own custom Calendar. Take a look at the full example of my component here I need help figuring out how to combine week divs that share the same value {{day.weekNumber}} so that there is only one div for each shared value, ...
I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...
Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...
I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...
I am creating a system for an educational institution where faculty can input scores using php and html. The layout is similar to an excel sheet, with 20 questions per student and about 60 students on each page. My dilemma is whether it's acceptable ...
My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...
I am attempting to customize an XML fragment retrieved from a server response using a Greasemonkey script. Take a look at this sample XML fragment from w3schools.com: <note> <to> Tove</to> <from>Jani</from> <heading ...
I am encountering an issue with ion-nav-view. Whenever I try to use it, the emulator displays a black screen, but it works perfectly fine in ionic serve. I suspect it may be a syntax error causing this problem. Interestingly, when I create a blank projec ...
I have integrated material-table into my react project and am facing an issue with centering the table title. Here is a live example on codesandbox: https://codesandbox.io/s/silly-hermann-6mfg4?file=/src/App.js I specifically want to center the title "A ...
Why does this always drive me crazy? I'm determined to include an external link () and an image(enter image description here) on my portfolio page within the title of the project. main.js { id: 18, url: 'single-portfolio. ...
I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...
I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...
What I Require I am in need of passing a URL variable from an HTML document to a JavaScript file. HTML Snippet <script> var urlParam = "{{ page_param.asy_request | replace('&','&')}}"; urlParam = urlParam.rep ...
If the Font Awesome icons are displaying as blank squares in all browsers despite correctly linking the stylesheet and attempting to install the package through npm which results in a npm ERR! code E401, it can be frustrating. Even after checking the brows ...
I have created a row of images that are clickable, and once clicked, a variable is sent via AJAX to a PHP file for a database query. The PHP file receives the variable and executes the correct query. However, instead of updating the HTML on my page, it sim ...
It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site. The main ...
Html: <div id="js-cert-file" class="form-group"> <button id="js-ob-browse-n-upload" class="btn btn-ob browse-and-upload-onboarding-ssl-button" style=""> BROWSE & UPLOAD </button> <input id="js-cert-file" class="hidden btn btn-ob" ...