How can I make the SVG change when hovering over the menu in Bootstrap?

Currently, I'm working on a bootstrap-inverse menu and I'm trying to implement a feature where the SVG logo changes its color to '#fff' when the menu is hovered over, instead of the default color of '#000'. Here's the snippet of my code:

   .navbar-inverse:hover {
background: #fff;
}
<nav class="navbar navbar__home navbar-fixed-top">
    <div class="menu">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <div class="navbar-brand navbar-brand-centered"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="297.000000pt" height="51.000000pt" viewBox="0 0 297.000000 51.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0 -75
0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M350 255 l0 -245 55 0 55 0 0 95 0 95 28 0 c24 0 32 -11 77 -95 l50
-95 58 0 c31 0 57 2 57 5 0 2 -27 48 -60 102 -51 84 -57 99 -44 108 68 43 92
93 80 161 -16 82 -88 114 -261 114 l-95 0 0 -245z m205 161 c37 -16 52 -48 41
-92 -8 -29 -57 -54 -106 -54 l-30 0 0 80 0 80 30 0 c17 0 46 -6 65 -14z"/>
<path d="M790 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1170 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1550 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0
-75 0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M1882 262 c-40 -130 -73 -241 -72 -245 0 -4 24 -7 52 -5 l53 3 14 52
14 53 78 0 78 0 12 -55 12 -55 58 0 57 0 -17 58 c-10 31 -44 141 -76 245 l-58
187 -66 0 -66 0 -73 -238z"/>
<path d="M2290 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
<path d="M2650 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
</g>
</svg>
</div>

        </div>


        <div class="collapse navbar-collapse" id="navbar-brand-centered category-tabs">
            <ul class="nav navbar-nav">
                <li data-toggle="modal" class="boxed" data-target="#nav-modal"><a class="ion-drag" style="font-size:32px;"></a></li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

htmlcsstwitter-bootstrapsvg

Answer №1

Since the structure does not include the navbar-inverse class and you prefer to fill the svg element instead of the div, you need to target the specific element you want to modify.

   .navbar-brand:hover svg path {
fill: #fff;
}
<nav class="navbar navbar__home navbar-fixed-top">
    <div class="menu">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <div class="navbar-brand navbar-brand-centered"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="297.000000pt" height="51.000000pt" viewBox="0 0 297.000000 51.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0 -75
0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M350 255 l0 -245 55 0 55 0 0 95 0 95 28 0 c24 0 32 -11 77 -95 l50
-95 58 0 c31 0 57 2 57 5 0 2 -27 48 -60 102 -51 84 -57 99 -44 108 68 43 92
93 80 161 -16 82 -88 114 -261 114 l-95 0 0 -245z m205 161 c37 -16 52 -48 41
-92 -8 -29 -57 -54 -106 -54 l-30 0 0 80 0 80 30 0 c17 0 46 -6 65 -14z"/>
... (further paths and codes) ...
</svg>
</div>

        </div>


        <div class="collapse navbar-collapse" id="navbar-brand-centered category-tabs">
            <ul class="nav navbar-nav">
                <li data-toggle="modal" class="boxed" data-target="#nav-modal"><a class="ion-drag" style="font-size:32px;"></a></li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

Answer №2

Sorry if I'm a little behind, but if you're looking to update the color of the SVG, here's the proper CSS:

Try this code instead:

svg:hover path {
    fill: blue;
}

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 methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

When a child element of the body is set to 100%, it causes the page to overflow

This is the css body, html { height: 100%; width: 100%; } #container { display: flex; position: absolute; flex-flow: column wrap; justify-content: stretch; align-items: center; width: 100%; height: 100%; text-align: ...

cssflexbox

Customize the Width of DropDown List Items with Razor

I'm having trouble adjusting the width of items in a DropDownList. I want the width of the DropDown items to be different from the DropDown itself. Can anyone assist me with this? <div class="col-md-3"> @f.FormGroup().DropDownList("IdTipoAc ...

jquerycssasp.net-mvcrazor

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

htmlcss

Preventing undesired form submissions in HTML and JavaScript

My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...

javascriptjqueryhtmlforms

I am unable to move HTML data to PHP

Here is my HTML code: <form action="test.php" method="get> <input type="text" name="text" /> </form> And this is my PHP code: <html> <head> <title>Result</title> </head> <body style="background: ...

phphtmlxampp

"Unlocking the power of your device's microphone with

Hello, I'm wondering if it's possible to utilize a device's microphone through trigger.io. Perhaps by integrating the native plugin functionality and creating a wrapper for microphone access using a forge native API, or exploring alternative ...

androidhtmliosmicrophonetrigger.io

Issues with clicking in JS eventListener

I'm in need of some assistance with a small header issue in my project. I've included all the necessary header files so that you can run it in a snippet and see what's going on. The problem lies within my JS file. When running the file, you ...

javascripthtmlonclicklistenerevent-listener

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

Is there a way I can insert an additional image directly behind my existing image using a pseudo element before or after? I tried it but it doesn't seem to be working. Are there any alternative methods I could try

Currently, I am attempting to include an additional image behind my current image by using a pseudo-element before, but unfortunately, it seems to not be working as expected. Are there any alternative methods to successfully add an image behind the origina ...

htmlcsscss-selectorspseudo-element

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

javascriptjqueryarraysajaxcss

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...

javascripthtmljquerypowershellbootstrap-5

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

htmlcssbootstrap-5

On mobile devices, the Next.JS application (featuring Chakra UI) does not stretch to full width

I'm stumped on this one... Maybe there's something simple I'm overlooking, but I'm hoping for some help from you guys. When viewed on mobile devices, the entire HTML element takes up around 80% of the screen width. Oddly enough, resiz ...

cssnext.jsmedia-querieswidthchakra-ui

Read through the text, determine the length of each word, and keep track of how

Objective: Create a JavaScript program that takes input from users in the form of several lines of text and generates a table displaying the count of one-letter words, two-letter words, three-letter words, etc. present in the text. Below is an example ou ...

javascripthtml

How can I align the navigation bar in the center using Bootstrap?

Let's discuss the code snippet provided below. I am looking to use Bootstrap to center this dropdown menu on the left side of the screen. Here is the screenshot for reference: . Any suggestions on how I can achieve this? Also, I would like to know h ...

htmlcsstwitter-bootstrap-4

Is there a way to dynamically update the content of <li> tag with values from an array every x seconds

I am trying to create a li list using jQuery that will update every 2 seconds with new content, similar to game news updates. However, I'm encountering an issue during the first cycle where it skips the second item in the array. The subsequent cycles ...

javascriptjqueryhtmlcss

Easy Steps to Align a Rotated Table Header

I am looking to rotate the header table using CSS while keeping all text together. Here is my CSS code: th.rotate { height: 100px; white-space: nowrap; } th.rotate>div { transform: rotate(-90deg); } Here is how I have applied this CSS: ...

htmlcss

Adding a unique styling to a div with a custom css class

I am experiencing an issue with my CSS file (approval.css) that is defined as a resource and applied to my XPage. Within the css, there is a specific line of code: .appNavBackground {background-color:#ffffd6 ;} When I try to apply this styleClass to a di ...

htmlcssxpages

Tips on customizing the appearance of mat-card-title within a mat-card

Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...

javascripthtmlcssangularfrontend