I would like to add a colored square to highlight the active menu item.
.main-menu ul {
padding: 0;
margin: 0;
text-align: center;
}
.main-menu li {
list-style-type: none;
display: inline-block;
padding: 40px 0;
}
.main-menu a {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
margin-right: 5px;
padding: 5px;
border-radius: 3px;
line-height: 24px;
display: inline-block;
}
.main-menu a:hover {
background-color: #F78E21;
color: #fff;
}Could this be it?
.nav-menu a:hover,
.nav-menu a.active{
background-color: #F78E21;
color: #fff;
}
If you don't currently have the class="active" and are wondering how to dynamically add it to each page, that is a valid question. If the code is static, simply manually include it on each page. For CMS platforms, seek solutions tailored to that system. In search of JavaScript solutions, refer to this helpful post jQuery add class .active on menu
Here is a sample of code for you to try out. I hope this helps!
HTML Snippet
<div class="main-menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Gallery</a></li>
</ul>
JS Code
$(function(){
$('ul').on('click','a', function(){
$('a').removeClass();
$(this).addClass('active');
});
});
CSS Styel(Feel free to customize this style in your CSS section)
.active{
border:1px solid red;
color : red;
}
I am struggling to find a setting that allows only one of the x number of validations to pass on an entire form. Due to the array keys in the name attribute of my fields, I had to use the .rules("add" function. While jQuery Validate works fine when all fi ...
Recently, I began working on an Angular 2 tutorial app using this repository. While I can successfully launch the app and display static content, I am facing challenges with rendering dynamic content from the component. I have a feeling that the error migh ...
Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...
function toggleDivs() { var container = document.querySelector(".container"); var top = document.querySelector(".top"); var bottom = document.querySelector(".bottom"); if (container.style.flexDirection === "column") { container.style.flexDirec ...
How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...
Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...
I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...
**I am trying to pass the correct user data to the modal ViewUser component, but it keeps displaying the same user regardless of which user I click on. How can I specify the specific user whose data should be shown? I am sending the user information as a ...
Is there an effective method to sequentially highlight each word on a web page? I'm thinking of breaking the words into an array and iterating through them, but I'm not sure what the best approach would be. I have experience with string replacem ...
"dependencies": { "ant-design-vue": "^1.7.2", "bootstrap": "^4.6.0", "core-js": "^3.8.3", "nuxt": "^2.14.12", "popper.js": "^1.16.1" } ...
Currently, the data in question is structured as JSON within this code snippet. However, I've received feedback indicating that it should actually be implemented as URL parameters. I'm currently facing some difficulties with modifying this to fit ...
I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...
I am looking to position an image in front of text and center it. <div id="info"> <ul> <h3> <li>NAME: Mohit Kumar Singh</li> <li>CONTACT:1234567890</li> <li>ADDE ...
I need help creating a test case for Selenium because I am struggling to locate elements on my website. The issue seems to be related to the fact that my site uses an HTML frame set. When I try to select all links using Firebug: //a I do not get any res ...
As part of my Bootstrap practice, I have implemented a navbar on my webpage. However, I am facing issues with the nav-bar toggler not working for small screens and the icon navbar-toggler-icon not appearing. Below is my current navbar code: <nav class ...
How should I format my return statement in a class component when using the && operator in the condition like this: if (x === null && y === null) If the condition is met, display this HTML: <div className="col-12"> <SomeComponent /> < ...
So, I'm working on a jQuery code snippet that controls the visibility of a rectangle element: $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); This code hides the rectangle initially and toggles it ...
I am currently working on a React application where I display an array of matches as a list of rows. Each row contains two athletes, and users can use checkboxes to predict the winner for each match. Only one athlete per row can be checked. To keep track o ...
I am currently facing an issue with the navigation on mobile view while using Bootstrap 4. Specifically, the .nav .dropdown-menu and .text-truncate classes are not displaying ellipsis when the content text length is too long. I have attempted to resolve t ...
Check out this fiddle for a picture button 'scroller' that I created. It may not be perfect, but my main focus is on making the arrow buttons fade in and out when reaching the end of the picture order. I am considering using a JavaScript functio ...