Back

Carat Icon not visible in Mobile Menu – Neve WordPress theme

If you have installed Neve theme on your WordPress website, you might have liked the ease of use and the level of customizations it provides. It gives you a lot many options to create a rich website.

We are going to provide steps to resolve a unique problem that we faced while we were building a website for a client based out of London, ON.

The problem was with the primary navigation menu in the header. It did not show the inverted carat icon in the mobile mode. Instead all the sub-menu items were listed as if they were the main menu items.

Carat Icon not visible in Mobile Menu - Neve WordPress theme. The sub-menu items are auto-expanded.

There are a few design options here:

  1. Introduce a cart icon clicking which will trigger the sub menu items to show up.
  2. Change the case, color, orientation of the sub menu items.

Thankfully enough, the theme Neve provides the solution of the option #1 given above through the WordPress > Customize options. The steps are:

  1. Navigate to WordPress > Customize > Header.
  2. Select the Mobile mode at the bottom right of the Customizer panel.
  3. Click on the Settings (cog wheel) icon of the Primary Menu.
  4. Ensure you are in the General tab area.
  5. Toggle the option that says “Expand first level of dropdowns when menu is in mobile menu content.”
Carat Icon not visible in Mobile Menu - Neve WordPress theme. Steps to fix the issue in WordPress customizer.

While in our opinion, having a carat icon that triggers expansion/closure of the sub-menu is a much intuitive option and should be switched on by default, there would be scenarios where the website developers, owners would be better off with having the sub menu items in a different style. You can use the below given code snippets and put them in the WordPress > Customize > Additional CSS panel.

The following code can be used to change color, case and orientation (in that order):

.primary-menu-ul .sub-menu li a  {
  color: red;
  text-transform: lowercase;
  justify-content: right;
}

If you’d want this code to apply only in the mobile version, you can use media queries.

We hope you find this post helpful. Let us know how it went if it did.

Author avatar
Troy
Troy is a technology enthusiast who loves exploring and discussing new product ideas.

Leave a Reply

Your email address will not be published.

Hey, wait!