I need help creating a Bootstrap 4 fixed navigation bar with 2 rows. The first row should have a centered brand image like the one on (with the image size changing after scrolling down), and the second row should contain the navigation menu. Thank you in advance for your assistance!
Take a look at this functional demo :)
If you check out the example here on stackoverflow, make sure to view it in full page mode :)
$(window).scroll(()=>{
let distance = $('#header').offset().top;
if(distance > 150){
$('#logo').addClass('header-image-scroll');
$('#nav-collection').addClass('navbar-scroll');
}
else {
$('#logo').removeClass('header-image-scroll');
$('#nav-collection').removeClass('navbar-scroll');
}
})#header {
height: 120px;
}
#nav-collection {
transition: margin 300ms ease-in-out;
font-size: .80rem;
}
#nav-collection li {
padding: 5px;
margin-right: 30px;
}
#logo{
height: 80%;
width: auto;
transition: transform 300ms ease-in-out;
}
.header-image-scroll{
transform: scale(0.7);
}
.navbar-scroll {
margin-top: -25px;
}
.content {
height: 100vh;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light sticky-top bg-white">
<div class="container-fluid p-0">
<button class="navbar-toggler my-2" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-center text-center ml-lg-2 ml-0" id="navbarCollapse">
<ul class="navbar-nav flex-row mb-md-1 mt-md-0 mb-3 mt-2">
<li class="nav-item">
<div id="header" class="d-flex align-items-center justify-content-center">
<img src="https://logos-download.com/wp-content/uploads/2016/11/The_New_Yorker_logo.png" id="logo">
</div>
</li>
</ul>
<ul class="navbar-nav justify-content-center w-100 border-top border-bottom font-weight-bold" id="nav-collection">
<li class="nav-item active">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Culture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business & Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Humor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cartoons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Magazine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Podcasts</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content"></div>In order to accomplish your goal, you will need two instances of the navbar.
To align items center/left, make use of Bootstrap's classes mx-auto, ml-auto.
Here is the link to view the CodePen: CodePen Preview
How can I create a responsive swipe image slideshow using CSS and JQuery that changes the image when swiping from right to left? I want it to work seamlessly on both computer and mobile screens. ...
Is there a way to navigate to a particular page on the pagination? ...
Within my SVG (target) element, there are multiple SVG (descendent) elements. This SVG container is nested deep within the SVG (root) on the webpage. The issue I am encountering is that when I register an event on the SVG (target), it only triggers if yo ...
After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled ...
I'm looking for some guidance on how to use AJAX to change the post URL based on a radio button selection. Do I need to use an if statement or is there another way? var barray = []; function cbutton() { $('input:radio[name="cheking"]:checke ...
Seeking advice on implementing basic validation for a newsletter form that only requires an email address. The current page layout doesn't allow space for jQuery error messages, so I attempted to use the HTML 5 required attribute. However, the form st ...
After reviewing this code that has been hard coded, I have identified the following: $scope.years = [ {id:curryear, name: curryear} {id:curryear - 1, name: curryear - 1} {id:curryear - 2, name: curryear -2} ]; My current task involves populating ...
Back in my old fixed-width days, I had a clever method of distributing data across three columns by dividing the number of elements by three. It worked pretty efficiently. Now in this modern responsive world, my current solution involves splitting data in ...
I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...
I am currently utilizing youtube-dl to download videos that are saved on YouTube. This tool enables me to download a variety of formats, thumbnails, and subtitles. Is there a method in which I can automatically generate an HTML5 <video> code snippet ...
In the process of upgrading all my websites, I decided to redesign them so that all URL's default to lower case. This meant changing all image names and paths to lower case as well, which was accomplished using regexes. However, this action inadverten ...
While attempting to retrieve the URL of an older website, I encountered an error: Fetch API cannot load http://xyz. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abc' is therefore not allo ...
Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...
Before finalizing their registration, users on our site are shown a review page. This panel displays all the items they have selected, creating a unique and variable list for each individual. However, each item in the list starts with a distracting date/ti ...
I have created a card-like component in my HTML with text inside. My issue is that when I resize the page, the card shrinks but the text overflows. Currently, I am using Bootstrap 5 and its h4 class like this: <div class="card bg-white"> ...
If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...
Ensure that the product detail page features a row with labels and buttons, positioned to the right of the image within Bootstrap columns. I have utilized Bootstrap 3 for this page layout. However, upon implementation, I encountered an issue whereby the b ...
Take a look at this code snippet. It allows users to upload images, move them around, resize, and rotate them once uploaded. $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages() { ...
I am working with a dropdown in Angular that contains JSON data. The data is stored in a List named options and I need to display the name field in the dropdown list. My current task involves implementing an autocomplete search feature for this dropdown. ...
Is it possible to initiate dragging on mouseover instead of click? Imagine a div that instantly starts dragging when hovered over. How can this be achieved? I would appreciate any guidance on how to make this happen. Thank you ...