The Sub-Menu in the Understrap Theme is Displaying Unusually

I am currently using the Understrap theme for my Wordpress website and I am having some issues with implementing a submenu. On this particular website (www.irricad.com), if you go to the "Support" menu and click on "Videos", you will see that the submenu appears on top of the main menu, making it difficult to navigate properly. I would like the submenu to display on the right side like a traditional sub-menu, complete with a little arrow indicating that it is a sub-menu.

The problem is that the sub-menu has the same class as the main menu item, which makes it hard for me to figure out how to make it display differently. Do I need to add extra CSS? Is there something I missed in the back-end menu configuration that tells Wordpress this is a submenu, aside from just the nesting level?

csswordpressthemessubmenu

Answer №1

After some trial and error, I was able to solve the issue by adjusting the menu depth in my theme settings to 3:

<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
    array(
      'theme_location'  => 'primary',
      'container'       => 'div',
      'container_class' => 'collapse navbar-collapse',
      'container_id'    => 'navbarNavDropdown',
      'menu_class'      => 'navbar-nav ml-auto',
      'fallback_cb'     => 'Understrap_WP_Bootstrap_Navwalker::fallback',
      'menu_id'         => 'main-menu',
      'depth'           => 3,
      'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
    )
  ); ?>

To enhance the functionality further, I made modifications to the navwalker.php file to incorporate a toggle style for child items with submenus:

// If item has_children add atts to <a>.
if (isset($args->has_children) && $args->has_children && 0 === $depth && $args->depth !== 1) {
  $atts['href'] = '#';
  $atts['data-toggle'] = 'dropdown';
  $atts['aria-haspopup'] = 'true';
  $atts['aria-expanded'] = 'false';
  $atts['class'] = 'dropdown-toggle nav-link';
  $atts['id'] = 'menu-item-dropdown-'.$item->ID;
} else {
  $atts['href'] = !empty($item->url) ? $item->url : '#';
  // Items in dropdowns use .dropdown-item instead of .nav-link.
  if ($depth > 0) {
    if ($args->has_children) {
      $atts['class'] = 'dropdown-toggle';
    } else {
      $atts['class'] = 'dropdown-item';
    }
  } else {
    $atts['class'] = 'nav-link';
  }
}

Lastly, I introduced additional CSS styling to properly position the submenu within the navigation bar:

    .navbar-expand-md .navbar-nav ul.dropdown-menu> li > ul.dropdown-menu {
        position: absolute;
        top:0px;
        border-radius: 0;
        left: 100%;
        padding-top:0;
        padding-bottom:0;
        min-width: 150px;
    }

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

Tips on making scrollable content within a static div element

I am currently working on designing a shopping cart layout for a website that allows users to order food from a restaurant. I want the shopping cart to remain fixed on the screen, but be scrollable when there is an overflow of items being added. This is a ...

htmlcsscss-position

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

htmlcssflexbox

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well. The foll ...

cssreactjsmaterial-uigatsbystyled-components

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

There are a total of 3 div elements and 3 links included in this setup. The goal is to only display one div at any given time. Upon clicking on a link corresponding to a different div, the current one should fade out while the selected one fades in seamle ...

javascriptjquerycss

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to update table cell content depending on selected option?

Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...

javascripthtmlcss

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

Changing the appearance of the navigation bar

<!-- Bootstrap 5.0.x library --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120c120e">[email protected]</a>/dist/css/bootstrap.min.css" ...

htmlcssbootstrap-5

Is it possible to use only CSS to crop an image into a square and then shape it into

I am attempting to create a circular shape out of images that have varying sizes and shapes (some rectangular, some square, some portrait, and some landscape). When I apply either clip-path: circle(50% at 50% 50%); or border-radius: 50%;, the image transf ...

htmlcssimage

Combine and blur multiple background images using CSS blending techniques

I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...

htmlcssreactjsblurry

Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected. HTML: <div class="container-c ...

htmlcsslinear-gradients

The homepage is not converting to a different language

Using the WPML plug-in for my WordPress website has been successful in translating most of my pages, but I am running into an issue with the home page. Even though I have manually translated and published the home page, it still does not translate when cli ...

jquerywordpresshtmlwpml

Guide to aligning Material UI card in the center (React)

I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :) link to image on website <Grid container justify="center"> <Card s ...

cssreactjsmaterial-ui

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image. I am open to unconventional solut ...

cssdropshadowcss-filters

The CSS style tag does not function in Safari

I am trying to dynamically load background images using CSS based on the display resolution using the @media keyword. This method works perfectly in Firefox and Chrome, but unfortunately, it does not seem to work in Safari. Is there something I might be ...

csssafari

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

javascriptjqueryhtmlcss

Color highlighting in dropdown HTML items

I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...

htmlcss

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

Joomla, Enhancement for iFrame Sizing

A close associate who runs his own construction business has asked me to create a website for him using Joomla. I have successfully implemented most of the features he wanted, but now I need some assistance. He wants to showcase references written about hi ...

htmlcssiframejoomla

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

csspseudo-class