[Resolved] Submenu not showing in mobile

[Shakespeare]

Hi Tom,

I recently requested from your team to disable the arrow down for submenu in desktop view however I can’t seem to show it in mobile. For your reference here’s a code from my previous topic:

@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;
}
}

Please let me know how to return the arrow down or how to make the submenu work in mobile.

Thanks

[Leo]

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.

[Shakespeare]

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;
}

}
}

[Leo]

Closing bracket at the wrong spot I think.

Should be after position: static;

[Shakespeare]

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

[Tom]

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

Thanks!

[Shakespeare]

Hi Tom,

My apologies, now its back.

Thanks

[Tom]

Can you try removing this from your custom CSS?:

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

[Shakespeare]

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.

[Tom]

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 */
}

[Shakespeare]

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

Thanks Tom and Leo!

[Leo]

Glad we could help!

[elsa]

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

[Leo]

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

Please open a new topic. Thanks!

[Author]

Posts