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.

Leave a Reply

Your email address will not be published. Required fields are marked *

About Us

Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful.

Services

Most Recent Posts

  • All Post
  • Analytics
  • Branding
  • Development
  • Digital
  • E-commerce
  • Google Tag Manager
  • Leadership
  • Management
  • Marketing
  • Social
  • Uncategorized
  • Websites
  • WordPress

Company Info

She wholly fat who window extent either formal. Removing welcomed.

We are committed to our customers’ success. If you are looking to work with someone who cares for the businesses they work with, call us today.

Services

© 2023 Created with thames.ca