I need help with a design challenge I am facing. I am trying to add a simple 40px height vertical border at the bottom of a Bootstrap 5 navbar, transitioning from color #e5e5e5 to color #fefefe. I have included a sample image for reference:
https://i.sstatic.net/FVpQV.png
If anyone has a solution or idea on how to achieve this design element successfully, I would greatly appreciate the assistance. Thank you in advance!
Your help is much appreciated.
Implementing border-image
.container {
height: 200px;
background: lightblue;
border-image:
linear-gradient(#e5e5e5,#fefefe) 0 0 100% 0/
0 0 50px 0/0 0 50px 0; /* adjust both 50px to modify the size */
}<div class="container"></div>Currently, borders do not support gradients.
To achieve a similar effect, you can use either a drop-shadow filter or a pseudo-element.
The drop-shadow feature can give you the desired look, so feel free to customize the color to your liking.
Drop-shadow
header {
height: 75px;
background: lightblue;
margin-bottom: 1em;
}
.filter {
filter: drop-shadow(0px 5px 5px grey)
}<header class="filter"></header>Pseudo-element
header {
height: 75px;
background: lightblue;
margin-bottom: 1em;
}
.pseudo {
position: relative;
}
.pseudo:before {
content: "";
position: absolute;
top: 100%;
width: 100%;
left: 0;
height: 40px;
background: linear-gradient(#e5e5e5, #fefefe);
}<header class="pseudo"></header>I have attempted to resolve the issue you are facing.
<html lang="en">
<head>
<!-- Insert Bootstrap CSS link below -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4a514f514f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"gt;
<style>
.custom-navbar {
position: relative;
}
.navbar-border {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, #e5e5e5, #fefefe);
content: "";
z-index: -1;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<!-- Your navbar content should be placed here -->
<div class="container-fluid">
<a class="navbar-brand" href="#">Your Logo</a>
<!-- Add additional navbar elements if necessary -->
</div>
<div class="navbar-border"></div> <!-- This element creates the border line -->
</nav>
<!-- Include Bootstrap JS and Popper.js scripts below -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219071907">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>
After restarting my laptop, everything was back to normal. Thank you for the help and replies. The issue I'm facing is with two identical pages that have the same code. The only difference between them is the file names - index and index2. However, f ...
I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...
When implementing scrollIntoView() with navigation buttons (up and down), I aim to display two items at a time to signal to the user that there are more items to navigate. However, the first and last items should retain their default behavior so the user u ...
Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...
Hey everyone, I have this cool concept where clicking on different flags will reveal a corresponding list. However, my jQuery code doesn't seem to be functioning properly. $('.canadaflag').click( function() { $(".canadalocations").toggl ...
There are 3 buttons on my custom page called page.php: <input type="submit" value="Btn 1" id="btn1"> <input type="submit" value="Btn 2" id="btn2" onClick="action();> <input type="submit" value="Btn 3" id="btn3" onClick="action();> ...
Can someone help me troubleshoot this HTML5 snippet? The LI elements are not aligning properly and I can't figure out why Item 1 is lower than Item 2. I need them to line up on the same level. Any suggestions would be greatly appreciated. <!DOCT ...
I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...
I am looking to create a UI/UX design that includes a logo and two menus, one for language change and one for navigation. https://i.sstatic.net/Tb6zc.png My current approach involves two div elements: 1. The first div contains the image and language men ...
I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...
Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name. https://i.stack.imgur.com/XZjV9.png If anyone has any tips on how to properly align the logo and brand on the na ...
Is there a way to implement dynamic forms using React Components? For instance, I have a form displayed in the image below: How do I structure this as a React component? How can I incorporate interactivity into this component? For example, when the "+ A ...
As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...
I need container-2 to be fully visible on mobile view, but the boxes in box2 are covering it. The size of the boxes in box2 should not change; I just want container 2 to be pushed down so that it is completely visible. body { margin: 0; width: 100%; ...
I currently have a centered button on my hero image, but the issue is that I would need to use multiple media queries to ensure it stays centered on all screen sizes. <style> .hero-container{ position: relative; text-align: center; } .her ...
I've been working on a layout that looks like this: X X X X X X X X A B Currently, I have used grid-template-columns: repeat(4, 1fr); to define the columns. However, what I actually want is for the last two items to take up the full width of the rem ...
Hello, I am currently working on my project and have a question about calling the ajax function when clicking a button. If(isset($_POST) && ($_POST['GET_PAYMENT'] == '1')) { $totalAmount = $_POST['GET_PAYMENT']; //Total amo ...
import React, { Component } from "react"; export default class FontChanger extends Component{ constructor(props){ super(props); this.state ={ selectedFont: "", currentFont: "", }; this.handleFon ...
Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. https://i.sstatic.net/7AbdL.png Actual Result: However, what I ended up with looks more like the image below. https://i.sstatic.net/nrQZf.png This is my HTML: & ...
I am working on a form page that is supposed to display a Success Alert (Boostrap) once the user fills out the form and clicks the Submit button. <form class="well form-horizontal" action="/contact" method="post" id="contact_form"> ... (input fiel ...