Remove buddypress submenu on MOBILE

[Riosbjj]

Hello.

ive successfully removed certain sub-menus from my buddypress on desktop using the following code:

.x-brand:hover {
text-decoration: none;
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(1) {
display: none
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(2) {
display: none
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(3) {
display: none
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(4) {
display: none
}

It looks like this:

But the code doesnt work for mobile… what can i do to my code so it also deletes certain sub menus from mobile? It currently looks like this:

Thank you. Again, i need the mobile version to look like the desktop.

Thank you!

[ruenel]

Hello @neojits,

Thanks for writing in!

Your code is valid and correct. it should work both for desktop and mobile menus. There might be other broken CSS code you have added which affect the code above. We would love to inspect your site if you wouldn’t mind sharing the URL in your next reply.

In the meantime, please go to Cornerstone > Theme Options > CSS and make sure to check your CSS code. You can use this site to check your CSS code:

• https://www.cleancss.com/css-beautify/

Kindly let us know how it goes.

[Riosbjj]

Hi Ruenel

Sure, its www.vsmegrappling.com

[ruenel]

Hello @neojits,

I can see that you have added this code in Appearance > Customize > Additional CSS:

/*removing unnecessary buddy press sub menus*/
.x-brand:hover {
  text-decoration: none;
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(1) {
    display: none 
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(2) {
    display: none 
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(3) {
    display: none 
}
body .sub-menu .menu-item-buddypress-navigation:nth-child(4) {
    display: none 
}	

Though your code is valid and correct, it is being overridden by the styling of the theme. Please be familiar with how the order of the css is applied to a page. This is the order:

• Stack Style.css
• Child theme’s style.css
• WordPress Additional CSS (Appearance > Customize > Additional CSS)
• Cornerstone Theme Options Settings
• Cornerstone > Theme Options > Custom CSS (Customizer’s custom css)
• Cornerstone’s page custom css

To resolve your issue, please relocate your code and add it in Cornerstone > Theme Options > CSS instead.

Best Regards.

[Riosbjj]

Hi there

thanks for the reply. Yes, that is what i did originally but it didnt work.

I have added the code back into cornerstone > Theme options > CSS, and it still doesnt work on mobile… any other ideas?

I appreciate the help

[Riosbjj]

[ruenel]

Hello @neojits,

Please update your code and use this one instead:

body .sub-menu .menu-item-buddypress-navigation:nth-child(1),
body ul .menu-item-buddypress-navigation:nth-child(1),
body .sub-menu .menu-item-buddypress-navigation:nth-child(2),
body ul .menu-item-buddypress-navigation:nth-child(2),
body .sub-menu .menu-item-buddypress-navigation:nth-child(3),
body ul .menu-item-buddypress-navigation:nth-child(3),
body .sub-menu .menu-item-buddypress-navigation:nth-child(4),
body ul .menu-item-buddypress-navigation:nth-child(4) {
    display: none 
}	

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[Riosbjj]

You are a rock star!

Thank you. it worked.

[ruenel]

Glad that I could be of assistance, @neojits!

[Riosbjj]

If its not too much to ask… the mobile link says “SOCIAL”, but not on desktop. anyway i can edit that text from 'SOCIAL" to something else?

[ruenel]

Helllo @neojits,

The keyword "Social " usually displays on smaller screens by default. If you also want to remove it, update your code again and use this:

body .sub-menu .menu-item-buddypress-navigation:nth-child(1),
body ul .menu-item-buddypress-navigation:nth-child(1),
body .sub-menu .menu-item-buddypress-navigation:nth-child(2),
body ul .menu-item-buddypress-navigation:nth-child(2),
body .sub-menu .menu-item-buddypress-navigation:nth-child(3),
body ul .menu-item-buddypress-navigation:nth-child(3),
body .sub-menu .menu-item-buddypress-navigation:nth-child(4),
body ul .menu-item-buddypress-navigation:nth-child(4),
body ul .menu-item-buddypress-navigation span.x-hidden-desktop{
    display: none !important;
}	

Cheers.