The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test".

For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover similar to the "Blog" button. However, when I hover over the "Test" button, only the text turns blue without a white background.

I'm struggling to figure out how to make it work. I need to create a CSS class for a button in the navbar that does not have a dropdown feature.

As an experiment, I even deleted all of the CSS, but the hover effect still worked on the "Blog" button.

<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
    <li class="dropdown ">
        <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Blog</a>
        <ul class="dropdown-menu">
            <li ><a href="index-blog.html">Blog Home <span class="badge">v1.1</span></a></li>
            <li ><a href="index-blog-2.html">Blog Home 2 <span class="badge">NEW</span></a></li>
        </ul>
    </li>
</ul>
<ul class="nav navbar-nav ">
    <li>
        <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu">
            <li ><a href="index-blog.html">Blog Home <span class="badge">v1.1</span></a></li>
            <li ><a href="index-blog-2.html">Blog Home 2 <span class="badge">NEW</span></a></li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Large Image</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-large-image-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-large-image-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-large-image-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Medium Image</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-medium-image-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-medium-image-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-medium-image-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Masonry</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-masonry-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-masonry-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-masonry-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li ><a href="blog-timeline.html">Timeline</a></li>
            <li ><a href="blog-post.html">Blog Post</a></li>
        </ul>
    </li>
</ul>
</div>
htmlcss

Answer №1

To customize the appearance of links in your navigation menus, you will need to include one of these CSS lines in your style sheet based on your HTML structure: (1) If the main parent div is .navbar-collapse:

    .navbar-collapse .navbar-nav>li a{background-color:#fff;}

(2) If the main parent is Navbar-default:

    .navbar-default .navbar-nav>li a {background-color:#fff;}

(3) If the main parent is navbar-inverse:

     .navbar-inverse .navbar-nav>li a{background-color:#fff;}

Make sure to adjust the CSS rules accordingly depending on the main parent class and the ul tag class.

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

A guide to sending props to a CSS class in Vue 3

I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class. Component File: Toast.vue <script ...

javascriptcssvue.jsvuejs3bootstrap-5

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

I came across this fantastic Bootstrap Pricing Slider that I found originally at Within my Bootstrap Pricing Slider, there is a "total amount" calculated after some math, resulting in a final score. The slider includes a "Process" button which currently ...

javascriptjquerycsspaypalpaypal-subscriptions

Implementing an interactive tab feature using jQuery UI

Recently, I was working on a project involving HTML and jQuery. Now, my goal is to create a dynamic tab with specific data when a button is clicked. This is my code for the JQuery-UI tab: $(document).ready(function() { var $tabs = $("#container-1 ...

javascriptjqueryhtmljquery-ui

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

javascriptjqueryhtmltextarea

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

javascripthtmlvue.js

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

Updating the chosen option using jQuery

Is there a way to change the currently selected option using jQuery? <select name="nameSelect" id="idSelect"> <option value="0">Text0</option> <option value="1">Text1</option> <option value="2" selected>Text ...

javascriptjqueryhtml

What is the best way to embed a webpage into another webpage using frames?

I need help embedding an iframe on my website, , to display the items I am selling on eBay. This is my first time attempting to create an iframe. ...

htmliframe

Text area with a set height and expandable max-height - scrollable overflow

http://codepen.io/africanmatt/pen/IcGpa .text { max-height: 0; overflow-y: auto; transition: all .45s ease-in-out; } .text-active { max-height: 50%; } I am looking for a way to resize the .text component's max-height so that it adjusts prop ...

jquerycssheightflexbox

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

On my website, I have successfully implemented two basic Show / Hide links that are working great. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" conte ...

javascriptjqueryhtmlhideshow

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

javascripthtmlangulartypescripttoggle

Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structur ...

htmlcss

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

phphtmlmysql

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...

htmlcssimageborder

Interactive mobile navigation featuring clickable elements within dropdown menus

I recently implemented a mobile nav menu based on instructions from a YouTube tutorial that I found here. Everything was working perfectly until I encountered an issue on the 'reviews list' page. The dropdown in the mobile nav is supposed to be ...

javascripthtmlcssreactjsmaterial-ui

Hiding HTML Labels with Jquery

I have a label that I want to hide initially and then display with the resultant values when the Submit event of the dialog box occurs. The label should not be visible at first, which is correct. However, even after clicking the submit button, it is not sh ...

jquerycsslabel

What are some effective ways to analyze jQuery and JavaScript using web development tools?

I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...

javascriptjqueryhtmlcssweb-developer-toolbar

What is the superior choice for developing a card game: creating it using SVG and the kinetic.js library or utilizing the oCanvas library

When it comes to creating a card game, which platform is more suitable: SVG or canvas using kinetic.js or oCanvas library? In terms of performance, event handling, and object tracking, which option would be more efficient? Additionally, if there is a bet ...

htmlhtml5-canvas

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

javascriptphphtmlcssemail