Submenu not showing in mobile

Hi there,

That code should only applied to desktop since you wrapped with @media already.

Looks like you are missing a closing bracket for the first block of code though. Best to make sure there are no syntax errors.

It still doesn't show up. See code:

/*
horizontal menu
*/
@media (min-width:769px) {
body .sf-menu > li,
body .sf-menu > li > ul > li{
position: static;
/*
disable arrow down
*/
.menu-item-has-children .dropdown-menu-toggle {
display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
padding-right: 20px;
}

}
}

Closing bracket at the wrong spot I think.

Should be after position: static;

Still not working Leo,

Here is my full css:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.main-navigation .sticky-logo img {
    height: 70px;
}

/*
horizontal menu
*/
@media (min-width:769px) {
    body .sf-menu > li,
body .sf-menu > li > ul > li{
	position: static;
}
/*
disable arrow down
*/
.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}
.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
}

}

body .main-navigation ul.menu > li > ul,
body .main-navigation ul.menu > li > ul > li > ul {
	width: 100%;
	height: 40px;
	padding-top: 13px;
	padding-bottom: 8px;
	border-bottom: 3px solid #fb5a29;
	margin-top: -1px;
}

body .main-navigation ul.menu > li > ul > li,
body .main-navigation ul.menu > li > ul > li > ul > li {
	width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}
.sub-menu li {
    float: none;
    display: inline-block;
}

.main-navigation .main-nav ul ul li a {
    font-size: 13px;
}

.inside-navigation {
    position: static;
}

/*
language right
*/
.main-navigation li.menu-item-float-right {
      float: right;
}

.elementor-21 .elementor-element.elementor-element-igb9zr7 {
    max-height: 51px;
}

.main-navigation ul ul.sub-menu {
    text-align: center;
}

ul.sub-menu li {
    float: none;
    display: inline-block;
}

.menu-item i._mi, .menu-item img._mi {
	margin-top: -22px;
}

.site-info {
    display: none;
}

.exp_floatdiv_content_padding_pro {
    box-shadow: none;
}

.secondary-navigation .menu-toggle {
      display: none;
}

.one-container .inside-article {
    padding: 0 0 0px;
}

Also please take note I set my mobile to slide navigation.

Thanks

Your website doesn't seem to be loading for me - can you take a look and let me know?

Thanks!

Hi Tom,

My apologies, now its back.

Thanks

Can you try removing this from your custom CSS?:

.dropdown-menu-toggle:before { 
    display: none;
}

Hi Tom,

Still not working. Also I'm not seeing :before in my css .

What I actually wanted was to hide the arrow down in desktop view and show it in mobile view and enable submenu view using mobile.

Here's the CSS on your site: https://www.screencast.com/t/oNwwWRvZ8R

It's inside the Simple CSS plugin.

You either need to remove that, or put it inside a media query like this:

@media (min-width: 769px) {
    /* CSS in here */
}

My bad Tom, I was looking at Additional CSS and not on Simple CSS. Tag as resolved.

Thanks Tom and Leo!

Glad we could help!

Hi,
I'm very newbie at coding, so please need the code to show submenu on mobile because mine doesn't show. Thanks.

It should be showing on default unless it's altered somehow.

Please open a new topic. Thanks!