How to remove hover effect specifically from collapsed navbar in Bootstrap?

I created a webpage with a navigation bar that has links which scroll to different sections on the page. I added a hover animation to the links using the code below:

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:active {
    box-shadow: 0 4px 0px 0px #62c4a4;
}

In addition to this custom hover animation, Bootstrap has a default hover effect that makes the text darker. You can see a demo of it on CodePen here.

However, I noticed that on smaller devices, when the collapsing list expands, the blue box-shadow hover effect also triggers. I don't want this effect to show on the expanded navbar, as the default Bootstrap hover effect is sufficient for that.

https://i.sstatic.net/0xuGk.png

Is there a way to prevent the hover effect from displaying on the expanded navbar?

jquerycsstwitter-bootstrap

Answer №1

To customize the appearance of buttons based on the device size, CSS media queries can be used.

For instance, to eliminate the border shadow on collapsed navigation items in this scenario:

@media (max-width: 768px) {

 .navbar-default .navbar-nav li a:hover, 
 .navbar-default .navbar-nav li a:active, 
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
        box-shadow: none;
 }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

androidjqueryhtmlcsscheckbox

Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...

javascripthtmlcssroutessingle-page-application

Validating Password Consistency using Javascript

I'm having trouble with validating the password fields and ensuring they match, even when both input boxes contain the same password. JavaScript var validator = $("#signupform").validate({ rules: { password: { required: true, minle ...

javascriptjqueryhtmlajax

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

htmlcssparallax

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

htmlcsssvg

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

Creating a credit card input field that switches cursor after reaching maximum number length and focuses on previous field when deleting with backspace. (function ($) { $(".nmipay-input-field").keyup(function () { if (this.value.l ...

htmljquery

Eliminating unused CSS space on a website

I am in need of assistance with removing the white space between the border of the Marquee text and the slider image on my website. I realize this may not be the appropriate place to ask, but any help would truly save my day. You can view the issue at . ...

htmlcss

Enclose elements in a div using a jQuery each function

I have successfully parsed data from an XML feed to JSON, but now I want to wrap each part of the data within a div. Here is the code snippet I am working with: var newsDiv = $('<div class="news-feed">').appendTo($("body")); $(release ...

javascriptjqueryhtmleach

Finding the Height of a Document in Angular 2

I'm currently in the process of transitioning some jQuery code to Angular 2, and am facing difficulties in finding a way to retrieve the height of the document. The jQuery code I've been using is $(document).height(); Could you please provide ...

jqueryangular

Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully. The problem at hand involves providing a colo ...

htmlcss

Inheriting Internet Explorer's zoom level within the WPF web browser control

My WPF window hosts a web browser control for displaying html/css pages, but I'm running into issues with the zoom factor from Internet Explorer. The web browser control seems to be affected by IE's zoom level, causing distortion in the way my HT ...

c#htmlcsswpfinternet-explorer

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

javascriptjqueryhtmlcanvasline

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

Seamless conversion

I have a web application created using Angular framework. Below is the code snippets for the template file and TypeScript file: HTML: <button class="btn btn-primay" (click)="changeColumnsSize()"> change column sizes</button> <div class=" ...

cssangular

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

javascriptjqueryhtml

Using JQuery's Ajax method to dynamically update a div in real-time while querying PHP

When importing 4000 rows from a CSV file, I encounter a scenario where Page 1 displays the CSV file on the server along with a PROCESS button. Upon clicking the button, the JQuery Ajax function is triggered to call the necessary PHP code responsible for th ...

phpjqueryajaxprogress

Is there a way to perfectly align the content at the center of the section?

I'm trying to ensure that the content in each section is centered. What is the correct way to achieve this? Should I focus on the containers/rows for alignment? I have tried placing the alignment properties in different elements (section, container, r ...

htmlcsstwitter-bootstrapbootstrap-5

What could be causing the hover effect to malfunction in this code snippet?

I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...

htmlcsshover