I'm working with a menu that has dynamic content. When a user clicks on a li tag, it receives the class "active". I want to show which class is active by adding a border-bottom to it, but I want the border-bottom to be positioned 5px under the li tag instead of right at the bottom.
https://i.sstatic.net/sJGnE.jpg
li.active {
border-bottom: 3px solid #333; /* grey border */
padding-bottom: 5px;
}
Check out the updated post: https://jsfiddle.net/L7haqtsv/58/
Give this a shot:
li.active::after{
content:'';
display:block;
margin-top:5px;
margin-left:15px;
width:138px;
border-bottom: 3px solid #333;
}
To enhance the appearance of your selected item, consider increasing the padding at the bottom. I found success by implementing this adjustment:
li.selected { border-bottom: 3px solid #333; padding-bottom:35px; }
You have the option to utilize the ::after pseudo element to insert content and position it as needed. Here is a snippet of code where I made some adjustments to show the border 5px below:
Below is the section I have modified:
li.active {
position: relative; // Include position: relative
border-bottom: 3px solid #333; /* grey border */
}
li.active:after {
position: absolute; // position the pseudo element
content: '';
border-bottom: 3px solid #333; /* grey border */
width: 100%;
bottom: -8px; // Modify this value for desired distance
left: 0;
}
The remaining code can be found below:
/* CSS code snippet */ <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active green"><a href="#green-ribbon"> </a></li>
<li class="yellow"><a href="#yellow-ribbon"> </a></li>
<li class="red"><a href="#red-ribbon"> </a></li>
<li class="white"><a href="#white-ribbon"> </a></li>
<li class="blue"><a href="#blue-ribbon"> </a></li>
</ul>I am currently using the nicEdit editor and have successfully integrated my own custom image resizing script. However, I am facing an issue where the default _moz_resizing feature in Firefox is interfering with my custom script. My goal is to have specifi ...
One generous member of our online community shared a CSS rollover code that is "fluid" and can adapt to different browser sizes. The code is provided below, along with a link to JsFiddle: CSS .container { width: 100%; height: 300px; backgroun ...
I need an inline solution for this issue: <div id="xy<%=statusCount%>" style="margin-top: 50px;display:${<%= statusCount %>!=0 ? 'none' : ''};" class="XYZ"> This code is causing an error ...
I'm a beginner in web development and I have some basic knowledge: HTML - structure of websites CSS - design aspect JavaScript - for adding interactivity Now, what exactly is jQuery, AngularJS, and Node.js? Upon researching, I discovered that jQue ...
Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...
I am using R markdown and have included multiple tables with buttons, but when I open the file, all tables are displayed at once. How can I ensure only one table is shown upon opening the file? https://i.sstatic.net/NFidf.png <script type="text/ja ...
When viewing my website on a mobile device, the select dropdown is going off the screen. I am using the bootstrap class form-control. Here is my code: <select name="service" formControlName="service" class="form-control shadow-none" style="width:100%"& ...
$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...
As I work on developing a form using Material UI React, my focus is on logging exercise sets to the database. To allow users to select the exercise they wish to log, I have incorporated a list of Material UI Menu Item components as options. Additionally, I ...
Could someone please clarify the meaning of the following value? Does it indicate that the output device must support exactly 256 colors, or is it acceptable for the output device to have 256 colors or fewer, or does the device need to support 256 colors ...
While developing my app, I came across a challenge with the filter in my ng-repeat. Initially, I could search by productCode or name. Then, a new requirement emerged - "Filter by SubcategoryId." The issue lies in filtering strictly by subCategoryId, while ...
Having this issue where I need to set a session variable when clicking on a regular link like: <a href="home" name="home">home</a> From my research, it seems PHP cannot capture the click event in order to set a session variable. I've he ...
When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>— Big Data Borat (@BigDataBorat) & ...
I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...
So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...
I have created two html pages named web.html and addroute.html. Both pages are built with bootstrap. The angularjs script includes two controllers: webctrl and addctrl. In web.html, there is a button that, when clicked, opens the addroute.html page. I am ...
I need assistance with looping through a complex JSON object using only JavaScript. My goal is to log each item along with its properties into the console. const nested_json = { "item1":{ "name": "banana", ...
Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...
Despite my efforts to center it, I'm struggling to do so. I've experimented with justify-content and align-items for each row and col class, but unfortunately, nothing seems to be effective. In the breakpoints (md, lg), I really need the 4 lorem ...
During the development of a website, I have implemented Ajax to load content dynamically along with the necessary JavaScript. The reason behind this choice is that all pages share the same layout but have different content. An issue I encountered was that ...