Dynamic Navigation - Apply a class if the menu item has subcategories

After successfully creating a navigation menu for desktop, I am now faced with the challenge of resizing the nav to fit mobile and tablet screens. Specifically, I want to add a class of "dropdown" to the top level list item if it contains children on smaller screens only (i.e., tablets or mobile devices). The desktop view of the navigation is working fine as it is.

The structure of my HTML code is as follows:

<nav>
    <ul>
        <li class="mobile">
            <a href="#">
                <span>Favourites</span>
            </a>
        </li>
        <li class="dashboard">
            <a href="#">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="fitness">
            <a href="#">
                <span>Fitness</span>
            </a>
            <ul>
                <li>
                    <a href="#">Stuart &amp; Elise</a>
                </li>
                <li>
                    <a href="#">Workouts</a>
                </li>
                ... (other nested list items)
            </ul>
        </li>
        ... (additional list items)
    </ul>
</nav>

I am utilizing Bootstrap and LESS for this project. My question is, how can I implement a "chevron" or "accordion" class specifically for smaller devices?

jqueryhtmlcsstwitter-bootstrap

Answer №1

Implement the CSS :not(:only-child) selector to target <a> tags that do not stand as the sole child of an <li>, meaning there is another child element (like a dropdown menu). Utilize the pseudo-element :after to insert an arrow symbol.

nav li > a:not(:only-child):after {
    content: '\00A0 \2193';
}

nav li:hover > a:not(:only-child):after {
    content: '\00A0 \2191';
}
<nav>
  <ul>
    <li class="mobile">
      <a href="#">
        <span>Favourites</span>
      </a>
    </li>
    <li class="dashboard">
      <a href="#">
        <span>Dashboard</span>
      </a>
    </li>
    <li class="fitness">
      <a href="#">
        <span>Fitness</span>
      </a>
    </li>
    <li class="food">
      <a href="#">
        <span>Food &amp; Nutrition</span>
      </a>
      <ul>
        <li>
          <a href="#">Faith Toogood</a>
        </li>
        <li>
          <a href="#">Recipes</a>
        </li>
        <li>
          <a href="#">Meal Plans</a>
        </li>
        <li>
          <a href="#">Build my own plan</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="health">
      <a href="#">
        <span>Health &amp; Wellbeing</span>
      </a>
      <ul>
        <li>
          <a href="#">Dr Hilary Jones</a>
        </li>
        <li>
          <a href="#">Emma kenny</a>
        </li>
        <li>
          <a href="#">Journal</a>
        </li>
        <li>
          <a href="#">Moodtracker</a>
        </li>
        <li>
          <a href="#">Goal Tracker</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="community">
      <a href="#">
        <span>Community</span>
      </a>
      <ul>
        <li>
          <a href="#">Groups</a>
        </li>
        <li>
          <a href="#">Stories</a>
        </li>
        <li>
          <a href="#">Guests</a>
        </li>
      </ul>
    </li>
    <li class="help">
      <a href="#">
        <span>Help &amp; Info</span>
      </a>
      <ul>
        <li>
          <a href="#">Quick start guides</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </li>
    <li class="mobile">
      <a href="#">
        <span>Logout</span>
      </a>
    </li>
  </ul>
</nav>

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 how to update a table following each button click during an ajax request

I am encountering an issue while trying to display data in a table by clicking on a search button. The problem arises when there is no data between the specified "Fromdate - Todate" range; the error message appears correctly. However, even after entering t ...

javascriptjqueryjsonajax

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

Struggling to properly position navigation bar items in a Bootstrap website

I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-f ...

htmlcssbootstrap-5

Why is my Bootstrap 4 Modal not appearing? Just a black screen with no modal?

https://jsfiddle.net/0z9mbp4r/ <tr> <td>11</td> <td><a data-toggle="modal" data-target="modal10">Miscellaneous Title</a></td> <td><p>C+</p></td> <td><i class="fa fa-sta ...

twitter-bootstrapbootstrap-4modal-dialog

Prevent elements from overlapping within a flexbox container

I've encountered an issue with resizing the window causing the logos to overlap the portrait image. Is there a way to fix the logos relative to the portrait? Below is the code: /* Defaults for Main Part of Pages */ body, div, h1, p { margin: 0; ...

htmlcss

Guide on how to automatically log out a user at a designated time

I am working on a basic application with login functionality using webforms, and I want to automatically log out the user at a specific time for updates. For example, at 13:30, I need to logout the user from the website and redirect them to the login page. ...

javascriptc#jqueryasp.netwebforms

Troubleshooting: Why is Jquery unable to retrieve image height?

Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortu ...

javascriptjquerycssimageheight

Tips for testing an HTML email in different email platforms before finalizing the send. Utilizing PHP and Javascript for optimum results

After creating a web app that sends HTML emails using PHP, I wanted to implement a feature that allows users to preview how the email will appear in different email clients such as Outlook and Gmail before sending it out. Despite searching for plugins tha ...

phpjqueryemailemail-templateslitmus

Track Your Instagram Followers with the Power of jQuery, JSON, and PHP!

Thanks to the collaboration of our team and the expertise of Sahil Mittal, we were able to successfully retrieve Instagram Follower Count using a combination of jQuery, JSON, and PHP. We are excited to share our code with anyone who is interested in obtain ...

jqueryjsonfacebookinstagram

How can I achieve a fading and dropping effect on a Div element?

I am currently working on animating a div with the ID #login_wrap to resemble a speech bubble. My goal is to use jQuery to create a fade in and drop effect for this div. The animation I have in mind is similar to the Fade In Down effect listed under Fadin ...

jquery

The vanilla JS router seems to be malfunctioning, as it is only showing the [object XMLDocument]

Recently, I attempted to implement routing into my JavaScript application using the following example: link. However, after diligently copying every file from the project, all I see displayed inside the <main></main> tags is "[object XMLDocum ...

javascriptjqueryroutes

Instructions for utilizing img.shape() in Javascript

import cv2 open image file img = cv2.imread('/home/img/python.png', cv2.IMREAD_UNCHANGED) fetch image dimensions dimensions = img.shape image details height = img.shape[0] width = img.shape[1] channels = img.shape[2] print('Image Dimensi ...

javascriptpythonhtmlcss

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

jquerycss

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

Creating a mobile-friendly split column layout with Bootstrap 5

I have a similar question to the one posed in this thread How to split Bootstrap column in mobile mode, but I am working with Bootstrap 5 and the previous solution using float: right no longer works due to flexbox. On desktop, I have two columns and I wan ...

htmltwitter-bootstrapbootstrap-5

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

The labels in production are getting cut off when creating a view in ASP .NET MVC

Upon viewing a Create View on my PC, I noticed that the main form and labels are adequately spaced: https://i.sstatic.net/1Q2bC.png However, once the website is deployed to IIS and accessed on the same PC with the same browser, everything appears cramped ...

cssasp.net-mvc

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

Maintain the same javascript variable throughout multiple pages

I am working on a project that involves utilizing a database along with 2 drop down menus. Through the use of JavaScript, I am able to capture the value selected from the drop down menus and then pass it on to my PHP script. The PHP script retrieves releva ...

javascriptphphtmlmysql

The Element fails to go back to its original position due to CSS Float

After changing the screen resolution, it appears that the nav-search-ul element fails to return to its correct position. It seems like the media query is not working properly. This issue only occurs in Chrome, as everything works fine in Firefox and IE. ...

htmlcss