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;
}
Take a look at this template 1) After referring to the above template, I developed a fixed plugin using JavaScript. 2) Clicking the icon will trigger the opening of a card. 3) Within the card, I designed a form using mdb bootstrap. Everything seems to ...
I currently have a webpage layout featuring a header at the top, a fixed sidebar on the left side, and main content displayed on the right. A demo version of this layout can be viewed at http://jsbin.com/iqibew/3. The challenge I'm facing is ensuring ...
I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...
I am currently utilizing puppeteer to extract data from a job website, and so far everything is running smoothly. app.get('/', async (req, res) => { res.render('index', {text: 'This is the index page'}); }) Up ...
I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...
I have developed an HTML/JavaScript application that requires an AJAX request to be made when the user refreshes or closes the page in order to close the application gracefully. To achieve this, I am using the pageunload event. I have implemented the func ...
I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...
Does anyone know a straightforward solution to this issue? I've been struggling to find one. Within my HTML file, there's a button that looks like this: <button @click="showModal">Show Modal</button> By clicking on the button, it t ...
In my material table, I need to apply specific CSS classes based on the content of the cell. These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code-success{ flex: 0 0 10% !impo ...
I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...
I am currently utilizing the nvd3-bullet-chart feature from the angularjs-nvd3-directives library in order to present maximum, current, and average data. To exclude the minimum variable from the array for display purposes, I have set its value to 0. In a ...
Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...
This week, I started working on a proof of concept with Angular Material where I have a table displaying nested data: <table> <thead> <tr> <th colspan="2">Employee Name</th> <th>Ovr&l ...
I found an amazing plugin at that I'm using. Currently, I have 3 countdown timers that are loaded with a json array. However, when I try to recharge them, they become blocked and the following error message pops up: TypeError: inst.options is undef ...
Is it possible to create a div that automatically inserts a new line for each new line in the code it detects when typing? For example, if I type: <div> Hello, World! How are you doing today? </div> This would normally be displayed as ...
I have a feature where users input their sitemap and it generates all the links in the sitemap. How can I then store each of those links in separate documents within a specific collection on Firebase? Below is the current function used to set data in Fir ...
I need to populate my option fields with data retrieved from a database. I encountered an error in the console: Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found! I am confident that t ...
Working on a project with JSF 2.0, here is the form being used: <h:form id="fff" onsubmit="reloadMap();"> <h:selectOneMenu value="#{rentCarPoolBean.state}"> <f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" /> ...
How do I trigger a load event from a parent component to the child component? The child component needs to be able to listen for the load event in a slot-defined element and then perform some actions with the event. For example: <template> <slot ...
When using Express to create an API endpoint, I typically respond with res.json() to send a JSON object in the response that can be consumed by the client. In my API, I am implementing batched promises, resolving them, and sending back an object. However ...