I can't make sub menu items to be hidden in Upfront by adding custom CSS to Global CS

I’m trying to hide the sub menu items on my mobile menu by default and to make them only visible after clicking on the top link, but I can’t manage to make it work.

I’ve added the following code to Global CSS, but it’s not taking effect:

/*mobile menu */
@media screen and (min-width: 1079px) {
div.upfront-navigation div[data-style=burger] .menu-item-has-children ul.sub-menu {
display: none;
}

div.upfront-navigation div[data-style=burger] .menu-item-has-children a:after {
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #999;
top: 40%;
right: 4px;
}

div.upfront-navigation div[data-style=burger] .menu-item-has-children.burger_sub_display a:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #999;
position: absolute;
right: 6px;
top: 45%;
}
}

@media screen and (max-width: 480px) {
.menu-header ul.menu li.menu-item a{
color: #000 !important
background: #fff !important;
}
.menu-header ul.menu > li.menu-item ul.sub-menu li a{
color: #000 !important;
background: #fff !important;
}
}

@media screen and (min-width: 1079px) {
div[data-style="horizontal"] ul.menu li a, div[data-style="vertical"] ul.menu li a {
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out!important;
-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out!important;
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out!important;
}
div.upfront-navigation ul.sub-menu {
border: 1px solid #ccc !important;
}
}

I just noticed that the sub menu elements seem to be styled under the unewnavigation.style.css file, but I don’t know how to override it.

  • Adam Czajczyk

    Hello mohamed

    I hope you're well today!

    To "show/hide" sub-menu you'd need a bit of JavaScript in addition to the CSS. I came up with a little JS snippet for you that seems to be working fine with the current mobile menu on site.

    To apply it to your site, please follow these steps:

    1. Create an empty file with a .php extension (e.g. "upfront-submenu-toggle.php")
    2. Using a "clean text" editor (such as e.g. Notepad++, Sublime or similar) paste this code inside:

    <?php 
    
    function uf_toggle_sub_menu_click() {
    	?>
    	<script type="text/javascript">
    	jQuery(function($) {
    		/* hide all sub-menus */
    		$('.upfront-mobile-breakpoint-navigation .sub-menu').hide();
    
    		/* show/hide on click */
    		$('.upfront-mobile-breakpoint-navigation .menu-item-has-children').click(function() {
    			$(this).find('.sub-menu').toggle();
    		});
    
    	});
    	</script>
    	<?php
    }
    add_action( 'wp_footer', 'uf_toggle_sub_menu_click' );

    3. Upload the file via FTP or cPanel "File Manager" to the "wp-content/mu-plugins" folder of you site; if there's no "mu-plugins" folder inside "wp-content", create an empty one and upload the file into it.

    I hope that helps.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.