How come the chosen item is not showing up in the bootstrap dropdown on WordPress?

I'm having trouble displaying the selected item in a bootstrap dropdown menu on WordPress. You can check out my site at . Ideally, it should function similar to this example: http://www.bootply.com/62811 https://i.sstatic.net/5d5FH.png

Here is my menu code:

<?php
        wp_nav_menu( array(
            'menu'              => 'dropdown',
            'theme_location'    => 'menu-6',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

My JavaScript code:

jQuery(document).ready(function () {
  jQuery(".dropdown-menu li a").click(function(){
    jQuery(".dropdown-toggle").html(jQuery(this).text()+' <span class="caret"></span>');
  });

  jQuery(".dropdown-toggle").click(function(){
        jQuery('#blog').toggleClass('blogTranslateY');
  });

  jQuery(document).on("click", function(event){
    var dropdown = jQuery(".dropdown-toggle");
    if(dropdown !== event.target && !dropdown.has(event.target).length){
      jQuery('#blog').removeClass('blogTranslateY');
  }
});

})

My CSS:

.navbar-header ul {
  padding: 0;
  margin-top: 0;
}
.navbar-header li{
  list-style: none;
  height: 40px;
  line-height: 39px;
  background-color: #eeeeee;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.dropdown-menu {
  display: none;
}
.dropdown-toggle::after {
  content: '';
  background-image: url(img/arrow.png);
  width: 15px;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 9px;
  position: absolute;
  right: 2%;
  top: 50%;
  margin-top: -4px;
  transition-duration: 0.4s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

dropup,
.dropdown {
  position: relative;
}
.navbar-nav {
  padding: 0;
}
.bs-example-navbar-collapse-1 {
  overflow: hidden;
}
.dropdown-menu {
  top: 100%;
  display: block;
  visibility: hidden;
  float: left;
  width: 100%;
  z-index: 1;
  margin-top: 1px;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  transition: all 0.5s ease-in;
  transform: translateY(-200px);
}
.dropdown, a.dropdown-toggle {
  position: relative;
  z-index: 5;
  background-color: #eeeeee;
  border-bottom: 1px solid #fff;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  line-height: 37px;
}
.dropdown-toggle {
  display: block;
  text-decoration: none;
}
.navbar-header a {
  text-decoration: none;
}
.navbar-header a:hover {
  color: #209dd8;
}
.dropdown.open > .dropdown-toggle::after {
  -webkit-transform:rotate(180deg);
  transform: rotate(180deg);
}
.dropdown.open > .dropdown-menu {
  transform: translateY(0);
  visibility: visible;
}
.blogTranslateY {
  transition-delay: 0s!important;
  margin-top: 0!important;
}

Answer №1

After looking through your style file, it appears that you have specified in the CSS that only the active menu items with the class .nav-category should receive styling. This means that your drop-down menu items are not being styled appropriately. To resolve this, navigate to line 81 of your style.css file and make the following change:

.nav-category  .current-menu-item , .current-menu-parent  {
    background-color: #fff!important;
}

Replace it with:

.current-menu-item , .current-menu-parent  {
    background-color: #fff!important;
}

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

Maintaining image ratio on the entire screen

I am in search of a way to create a webpage that includes the following elements from top to bottom: Full-screen width image/background-image (maintaining aspect ratio) Navigation bar (aligned at the top right of the image) Some text Another full-screen ...

Utilizing slid.bs.carousel to retrieve values upon slide change

I am working on incorporating Bootstrap 4's Carousel with jQuery and PHP to create an odometer that dynamically changes its value on each slide. My plan is to utilize .addClass based on the length of the value. One challenge I am facing is that when ...

I am experiencing issues with the middleware not functioning properly after implementing a custom application with Next.js

I'm currently diving into Next.js version 13 and attempting to customize the app based on the standard documentation. However, it seems that the middleware isn't being invoked as expected. I suspect there might be something wrong with my implemen ...

Having trouble utilizing two components in Vue.js

I'm brand new to working with Vue and I've encountered an issue: Below is my index.html file where I have used two custom tags - aas and task : <!DOCTYPE html> <html> <head> <title></title> </head> <bo ...

What is the process of nesting widgets in kendoui with the PHP wrapper?

I have created a code using treeview in manual mode. div id="treview-back"> <?php $treeview = new \Kendo\UI\TreeView('treeview'); // function to create TreeViewItem with imageUrl function ImageTreeViewItem($text) { ...

The Navigation Bar in Vue Component Renders Incorrectly due to Bootstrap Integration

I am facing an issue with my Bootstrap navbar not displaying correctly within my Vue component. It is appearing as a stacked greyed out button, almost like it's assuming it's on a small device. https://i.sstatic.net/yoPvO.png You can find the c ...

A variable that can be changed is available within a closure in Angular services

Currently, I am working with the Angular UI grid library and facing an issue while populating a custom dropdown filter. This filter is only meant to be applied to specific columns, which is why I have implemented a for loop to dynamically access these colu ...

Despite receiving a 404 fetch response, the page still exists

I have encountered an issue with my Fetch code (POST) where the response shows status: 404 even though the URL returns a JSON when accessed through the browser. Surprisingly, changing the URL to https://httpbin.org/post brings back normal data. Furthermore ...

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

How can I create multiple divs that look alike?

I've taken on the challenge of developing our own interpretation of Conway's "Game of Life" for a project. To represent my 20x20 grid, I decided to create nested divs - the whole grid is one div, each row is a div, and every cell within that is a ...

How can I set up a cycling image background for the main div and a floating menu?

I was wondering how I could keep a cycling image background stationary behind the main content while scrolling through the page. You can check out the project itself by following this link. Feel free to use any of the code, including the fixed header menu, ...

Sorting functionality in Dyntable is not functioning properly when called from an Ajax request

I can't seem to get DynaTable with Ajax to work properly. Sorting, searching, and pagination are not functioning as expected. When I click on the column header, nothing changes in my table. Could someone please assist me? Below is my code snippet: H ...

What is the best way to retrieve AJAX responses from JSON data that contains multiple sets of information

["12-Feb-2017","06-Feb-2017","5","45","40","Neha shishodia","USD","unit2","phase1","Change Request","Client Approval Awaited"]["07-Feb-2017","04-Feb-2017","6","54","48","Neha shishodia","USD","unit2","phase1","Change Request","Manager Approval Awaited"] T ...

Is there a way to swap out the audio tracks for a .mp4 video file on the web?

I am currently working with a video file in .mp4 format that has multiple audio tracks embedded within it. Despite using VideoJS & ReactPlayer, I have been unable to detect these audio tracks. Is there a method to specifically target a particular audio tr ...

Iterate over a collection of JSON objects and dynamically populate a table with statistical data

In JavaScript, I am trying to dynamically generate a table with statistical data from an API that contains an array of JSON objects. The JSON data has a property called "score" which is interpreted as follows: score: 5 (excellent); score: 4 (very good); ...

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

A guide on implementing React hooks within a React class component

Just stepped into the JavaScript world and facing a bit of trouble... Currently, I'm working with a React hook import { useKeycloak } from '@react-keycloak/web'; import { useCallback } from 'react'; export const useAuthenticatedCal ...

Tips for effectively handling numerous events from multiple Slickgrid instances on a single page

I'm encountering an issue with utilizing multiple Slickgrids on a single page. With the number of grids changing dynamically, I generate them within a JavaScript function and maintain them in a grid array as shown below. var columns = []; var options ...

Building VSCode on Windows: A step-by-step guide

I am currently in the process of compiling https://github.com/Microsoft/vscode from the source code, but I am facing some challenges. After successfully running scripts\npm.bat install, I proceeded to run scripts\code.bat and a strange window app ...

Switch Tabs with Dropdown Selection

I came across a website with a similar feature, but I am interested in using a dropdown menu instead of a button or link. Check out this webpage for reference The problem seems to be related to this line of code: onchange="$('#'+$this).tri ...