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

Using Zen coding to insert an image source from a selection of options

I am attempting to use zen coding to generate a series of img tags with the src attribute populated by a list of filenames. Below is the list of filenames I have, followed by the desired output: filenameA.jpg someotherone.jpg anotherimage.jpg sample.jpg ...

htmlemmet

Issues with jQuery Slider not functioning properly within asp.net webform

I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page. However, when I tried using it with an ASP.NET web form, it failed to work fo ...

jqueryasp.nethtmlcssjquery-slider

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

javascriptjquerycssfont-awesome

How can JavaScript be used to activate HTML5 AppCache?

<html manifest="example.appcache"> Is it possible to use javascript to include the manifest="example.appcache" part? ...

html

Incorporate a line break into a document using JavaScript

Is there a way to make all the items inside document.get on new lines without using paragraph elements? I have tried br/ and \n, but they do not work as expected. They either cause issues with JavaScript execution or fail to create new lines. <scr ...

javascripthtmlnewlineline-breaks

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

htmlcssweb-applicationsuser-interfaceuser-experience

housing the picture within a CSS grid

I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries? When I attempt to insert the ...

htmlcsscss-grid

php modes breaking away from traditional php

My recent inquiry was regarding the distinction between HTML and PHP separation. While tutorials and examples often mention this concept, I have realized that it goes beyond what most people talk about - specifically relating to PHP modes. Is there a need ...

phphtml

The gradient applied to the svg <text> element is failing to function

I'm currently working with an SVG element and trying to incorporate a <text> element with a gradient. Interestingly, the same LinearGradient successfully applies to one SVG but not to another. My question is whether a gradient can be applied to ...

htmlcsssvggradientlinear-gradients

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Using jQuery to toggle the visibility of HTML elements

Hi there, I am trying to create an interactive HTML sidebar where each section shows its respective posts when clicked. However, I am facing issues as the content keeps hiding continuously. <div class="col-md-3"> <div class="list-grou ...

javascriptjqueryhtml

Retrieving a value from an array at random to assign to a different variable

I have different options for a specific variable depending on the scenario --> var lowSpeed = Math.random() * (45 - 30) + 30; var mediumSpeed = Math.random() * (60 - 45) + 45; var highSpeed = Math.random() * (80 - 60) + 45; var highwaySpeed = Math.rando ...

javascripthtmlarraysrandom

Converting Data from MySQL and PHP to Excel

Is there a way to export human resource applications stored in my MySQL table as an Excel file? function exportExcel($filename='ExportExcel',$columns=array(),$data=array(),$replaceDotCol=array()){ global $connect; header('Content-Enc ...

phphtmlmysqlhtml-tableexport-to-excel

What is the best way to manage the 'content' attribute in TSX?

I'm currently developing an application that utilizes schema.org. In the code snippet below, you can see how I've implemented it: <span itemProp="priceCurrency" content="EUR">€</span> According to schema.org do ...

javascripthtmltypescriptschema.orgtsx

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

Issue with blogger posts not showing thumbnails on the homepage

Check out my blog Lately, I've noticed that some of my Blogger posts are not displaying thumbnails in the home menu when using a custom template. However, after testing with different custom templates, I don't believe the issue lies with the tem ...

htmltemplatesblogger

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

csscss-animationscss-transitions

jQuery - Enlarge Tree View to the level of the selected node

I am struggling to figure out how to expand the tree view up to a selected node level. If anyone has any ideas on how to accomplish this, please let me know. For instance, if we click on 'Parent d' in the 'Category list', I want to exp ...

javascriptjqueryhtmlcss