Is there a way to implement a fixed navbar with a parent logo using bootstrap? I would like the logo to shrink as you scroll, while still remaining visible within the fixed navbar.
For a demo of the shrinking logo and navbar, you can visit:
Is there a way to implement a fixed navbar with a parent logo using bootstrap? I would like the logo to shrink as you scroll, while still remaining visible within the fixed navbar.
For a demo of the shrinking logo and navbar, you can visit:
To accomplish this task, apply the bootstrap class navbar-fixed-top to the nav element and include a small amount of jQuery code to handle the window scroll event. When the user scrolls up or down, simply toggle a CSS class.
Check out the demo here: Demo Link
$(document).ready(function () {
$(window).scroll(function () {
//Method 1: Using addClass and removeClass
//if ($(document).scrollTop() > 50) {
// $('.navbar-default').addClass('navbar-shrink');
//} else {
// $('.navbar-default').removeClass('navbar-shrink');
//}
//Method 2: Using toggleClass
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50)
});
});@media screen and (min-width: 992px) {
.navbar-default {
padding: 30px 0;
transition: padding 0.3s;
}
.navbar-default.navbar-shrink {
padding: 10px 0;
}
}
.navbar-default a {
color: #4D4D4D;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
line-height: 42px;
font-weight: 700;
font-size: 20px;
}
.navbar-default a.brand > img {
max-width: 70px;
}
.navbar-default a.active {
color: #2dbccb;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
.content > section {
width: 100%;
height: 100%;
}
#portfolio {
background: #2dbccb;
}
#about {
background-color: #eb7e7f;
}
#contact {
background-color: #415c71;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://trungk18.github.io/"><img src="trungk18.png" class="img-responsive" title="trungk18" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Content Section -->
<div class="content">
<section id="portfolio"></section>
<section id="about"></section>
<section id="contact"></section>
</div>Can anyone guide me on aligning spaces responsively on a board in HTML using Angular 1.x? I've tried using vw/vh's and %s, but consistency breaks on different view sizes. Any straightforward suggestions to address this issue? Avoiding multiple c ...
In my Angular.js application, I currently have a row of buttons that open up new routes to display partial views. Now, I need to modify some of these buttons to trigger a ui.bootstrap Collapse feature with the view inside it. The template code from the ui. ...
I'm trying to understand the meaning behind the message in the Chrome profiler that says "Layer was separately composited because it could not be squashed." Recently, while modifying my HTML, I added a fixed position div inside a relative div and app ...
What is the solution to fixing a 403 error? I have noticed that when trying to access a certain website, I am able to browse for about 30 seconds before encountering a 403 error. This issue only started occurring today, and I find it strange because if m ...
Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...
My website is almost complete, but I am facing some challenges with the mobile version. All buttons that use JavaScript are not functioning properly, whereas buttons with simple links work perfectly fine. This issue doesn't occur on Chrome when using ...
After successfully creating a script to send HTML emails, I encountered an issue. I have the email content stored in a separate HTML file, which is then read using a while loop and fgets(). However, I need to find a way to pass variables into the HTML. For ...
Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...
I'm facing a challenge using Flexbox to achieve the desired result shown below https://i.sstatic.net/8vJGQ.png When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this l ...
I have a JavaScript object that I want to convert into HTML elements and display it in Vue.js. So far, my approach has been to convert the object into strings representing HTML elements and then add them to the template. However, even though this method di ...
I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...
If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...
I have a container with a width of 50% of the viewport width, which contains some text. I want to align some other text below it to the right side. You can find an example here: https://jsfiddle.net/hadr4ytt/1/ Here is the current CSS for this: .containe ...
I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...
I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...
Is it possible to fetch a JSON array from a web service and save it in a variable? Consider the following table structure: <table id="myTable" border="1"></table> The table is populated using the code below: // JSON array var myData = metho ...
I am searching for a Javascript alternative to a method I have been using in PHP. Specifically, I want to streamline the basic setup of my pages: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
I have integrated Django Crispy Forms with Twitter-bootstrap by installing crispy forms as per the instructions on this link. However, I am struggling to locate the uni-form files that need to be included in my HTML code. Can anyone provide guidance on ho ...
I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...
Our team developed an application using the Aurelia framework that utilizes ES6 decorators. While the app works smoothly on Chrome, Firefox, and Safari versions 8 and above, it encounters difficulties on Safari 7.1. What steps should we take to resolve th ...