What's the best way to display my submenu options on mobile devices?

Having an issue where the menu and submenus are working fine on full-screen mode but not displaying correctly on mobile devices. Here is the CSS code I've tried along with the HTML snippet from a WordPress site.

@media (max-width:767px){
.main-navigation .menu-item .menu-item-type-post_type .menu-item-object-page{
width: 100% !important; 
}
.menu-item-has-children{
display: block !important;
}
}
<nav id="site-navigation" class="main-navigation menu-navigation pull-right" role="navigation" aria-label="Primary Navigation">
                <div class="menu-primary-container"><ul id="primary-menu" class="menu"><li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-29 current_page_item menu-item-110"><a href="https://ceptech.net/" aria-current="page">Home</a></li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-111"><a href="https://ceptech.net/metal-stampings/">Metal Stampings</a><span class="arrow-icon" aria-hidden="true"><svg class="svg-icon th-fill-current" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
<ul class="sub-menu">
    <li id="menu-item-3077" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3077"><a href="https://ceptech.net/automotive-solutions-custom-progressive-die-stamping/">Automotive Solutions with Custom Progressive Die Stamping</a></li>
</ul>
</li>
<li id="menu-item-2682" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2682"><a href="#">Services</a><span class="arrow-icon" aria-hidden="true"><svg class="svg-icon th-fill-current" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
<ul class="sub-menu">
    <li id="menu-item-2678" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2678"><a href="https://ceptech.net/rapid-prototyping-services-for-custom-progressive-stamping/">Rapid Prototyping</a></li>
    <li id="menu-item-2679" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2679"><a href="https://ceptech.net/custom-emi-shields-with-progressive-die-stamping/">Custom EMI Shields</a></li>
    <li id="menu-item-2680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2680"><a href="https://ceptech.net/custom-progressive-die-stamping-for-battery-contacts/">Custom Progressive Die Stamping</a></li>
</ul>
</li>
...
cssmobilesubmenu

Answer №1

Ensure you include dots before each class in your CSS selector, for example:

.main-navigation .menu-item .menu-item-type-post_type .menu-item-object-page .menu-item-has-children

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

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading. GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT The browser ...

javascriptjquerycss

Utilizing LESS for Mixing

I've been diving into the official LESS documentation (version 1.5) and I'm struggling to grasp how I can import a reference to another CSS file to utilize its content in my own stylesheet. For instance: stylesheet.less @import (reference) "boo ...

csstwitter-bootstraplessmixins

When a jquery confirm dialog is displayed, the scroll bar mysteriously fades away

Whenever a jQuery confirm dialog is displayed, the scroll bar on the page disappears, causing the page to suddenly shift to the right. Here is the JavaScript code for the dialogue: <script src="vendor/jquery-confirm.min.js"></script> <link ...

jqueryhtmlcss

What is the best way to incorporate quotes within inline CSS code?

Can anyone help me with inserting the following CSS into HTML? Here is the CSS snippet that needs to be converted to HTML: .group .circular-progress::before { ... content: "10%"; ... } This is what I have attempted so far: <div class="group"&g ...

htmlcssruby-on-railsruby

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

javascriptcssreactjsmaterial-ui

Differences between preloading stylesheets and W3C validation explained

I am faced with the challenge of satisfying two different checkers: W3C validator and Google Page Insights Google Page Insight advised me to asynchronously load all blocking CSS files. Therefore, I have modified the stylesheet inclusion by preloading it i ...

cssw3c-validationpreloadgoogle-pagespeed

Unleashing the power of dynamic column width in Material UI Grid

Is it possible to dynamically change the column width for grid items within the same container in material UI grid? Sometimes I have 2 grid items that need to display in the same row, and other times I have 4 grid items that I want to appear in the same r ...

javascriptcssreactjsmaterial-ui

The red solid outline of 1px is not functional when attempting to enlarge on hover

Recently, I stumbled upon a PSD design that really caught my eye. https://i.sstatic.net/R46Ko.jpg It inspired me to create a website similar to . One feature I particularly liked was how a circle appeared when hovering over a link. Plus, I plan on using ...

htmlcssbootstrap-4

The final element that fractures all its sibling elements positioned absolutely

I am experiencing an issue with a container div that contains 5 absolutely positioned images. When I specify the last image as absolutely positioned, all other images lose their positioning and stack at the top. The container itself is relatively position ...

htmlcss

Exploring the possibilities of integrating Storybook/vue with SCSS

After creating a project with vue create and installing Storybook, everything was running smoothly. However, as soon as I added SCSS to one of the components, I encountered the following error: Module parse failed: Unexpected token (14:0) File was process ...

javascriptcssvue.jssassstorybook

Tips for adding a numerical prefix to each line when the textarea is in editable mode

After conducting extensive research on Google, I have been unable to find a satisfactory solution. What I am aiming for is similar to the concept illustrated in this image: https://i.sstatic.net/iq6DE.png I should mention that my current technology stack ...

javascripthtmlcssangularjs

The precise placement of DIVs with a background image

Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions? Here is my code: <div class="div-bg" style="background-image:url ...

htmlcss

Does the CSS file load multiple times if it is being used on multiple pages?

I have a question regarding website performance. I am in the process of creating a 7-8 page website with a common CSS file used throughout. My concern is whether this CSS file will get loaded from the server every time I navigate to a new page, or if it ...

htmlcss.htaccess

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

What is the best way to position HTML grandchildren using CSS Grid Lines?

I am looking to use CSS grid to create a section divided into 3 areas: header (yellow), body (red), and controls (blue). Each area will have its own div as the grid item, with children elements within these divs. https://i.sstatic.net/A367O.png Is it pos ...

htmlcsscss-grid

Switch background color multiple times on click using JavaScript loop

Hello amazing people! I have a container with 52 small boxes and one large box containing a letter. The smaller boxes are arranged around the larger one using CSS grid, and when hovered over, they turn light grey. My Objective When any of the 52 small b ...

javascriptjqueryhtmlcss

"Utilize input within the div element to occupy the entire cell of the

There is a form input enclosed within a div which is nested inside a table cell. <td align="left" id="subformAttachments_Htmltable1td10" style="border:solid 1px black;width:316px;" class="tbldroppable ui-droppable ...

htmljquerycssbootstrap-4

Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new ...

htmlcssvisual-studio-code

When using a routerlink in an a tag with Bootstrap 4, the navigation tab functionality may not work as expected

I've been working on bootstrap4 tabs and everything is working smoothly until I add a router link to the anchor tag. Strangely, only the hover effect works in this case. Can anyone help me troubleshoot this issue? Below is my code snippet: <link ...

htmlangularcssbootstrap-4