Is it possible to create a top-fixed navigation using the navbar in HTML?
I also want to make another heading text that remains fixed even when the page is fully scrolled. I am having trouble achieving this effect.
Please suggest if it can be achieved with regular CSS or if there are any Bootstrap classes that can help.
Could you please review the code below? It should meet your requirements. We have included position: fixed; in the title-div as per your specifications.
For more details, please visit this link: https://jsfiddle.net/yudizsolutions/wuz8bk9h/3/
body {
padding-top: 104px;
}
nav.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.title-div {
position: fixed;
top: 56px;
left: 0;
width: 100%;
z-index: 10;
background: aquamarine;
}
.card-section {
padding: 50px 0;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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" id="navbarNav">
<ul class="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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="title-div">
<h1 class="text-center">
Title Heading
</h1>
</div>
<section class="card-section">
<div class="containter">
<div class="row justify-content-center">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 1</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
<div class="col-md-8">
<div class="row justify-content-center">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 2</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 3</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 4</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h5 class="card-title">Card 5</h5>
<p class="card-text">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<br>
</p>
<button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration:none" href="">Get More</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...
We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads! Here's a look at our current header setup: This is the current HTML code for our ...
I recently developed a website optimized for monitors, but when I viewed it on an iPad, the right corner was missing some CSS styles. Take a look: Here is the HTML code: <div id="nav-top"> <div class="wrapper"> <!-- To ...
Recently, I stumbled upon the website "". I must say, it is truly remarkable. I can't help but wonder how the content on this page is cleverly faded in and slides up. This specific page caught my attention: ...
I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...
My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...
I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...
I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here: https://i.sstatic.net/Yvdal.jpg I have successfully displayed "fizz" and "buz ...
When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...
A php script is being utilized to scan a directory and populate a gallery with all the images. Within the <div id="content"> tag, the function <?php create_gallery("path"); ?> loads all the images. The issue arises when the height of the <d ...
Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...
I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...
I am currently working on formatting an email digest using HAML and tables. My goal is to set a background-image to a table-cell in the email, but I've come to realize that Outlook requires VML in order to display a background-image correctly. After ...
UPDATE 1 I have attempted to use both crispy-forms and widget-tweaks, but it does not seem to work. It appears that widget=forms.RadioSelect() is not compatible with using these two libraries together... I am looking to display radio buttons inline usin ...
.nav-btn { display: block; background-color: #000; color: #FFF; font-size: 1.5em; /*text-align: right;*/ /*right: 2%;*/ float: right; cursor: pointer; padding-top: 20px; /*posi ...
I am currently using Html5, fabric.js, and JavaScript to upload multiple images to a canvas. However, there are instances where the uploaded image size exceeds that of the canvas. I am looking for a way to ensure that the image is set to a fixed size. v ...
I’ve scoured through Google and Bootstrap resources, but I can’t seem to figure out how to change the color of the '-' symbol. The closest answer I found was on How to change customized carousel indicator background color?, but that only chan ...
When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but ...
I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...
When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...