flash theme mobile menu

cpairus
(@cpairus)

3 years, 2 months ago

The menu icon on the flash theme mobile view is very small and obscure.. not sure if visitors even see it.. how can I improve it

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Linards
(@linardsn)

3 years, 2 months ago
You can improve the visibility of the menu icon on the Flash theme mobile view by making it larger and more noticeable using custom CSS. Here’s how:
1. Log in to your WordPress admin dashboard.
2. Navigate to Appearance > Customize to open the WordPress Customizer.
3. In the Customizer, click on “Additional CSS” at the bottom of the menu.
4. Paste the following CSS code snippet in the “Additional CSS” section:
```
/* Adjust the size of the mobile menu icon */
@media screen and (max-width: 768px) {
  .flash-responsive-menu .menu-toggle {
    font-size: 24px; /* Adjust the size of the icon */
    color: #000; /* Change the color of the icon */
    background-color: #f1f1f1; /* Add a background color to the icon area */
    padding: 10px; /* Add some padding around the icon */
  }
}
```
You can modify the font-size, color, background-color, and padding properties to fit your needs. Adjust the values until you’re happy with the appearance of the menu icon.
1. Click on the “Publish” button to save your changes.
Now, the menu icon should be larger and more visible on mobile devices. You can further customize the appearance by tweaking the CSS code as needed.
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

3 years, 2 months ago

You’re using a commercial/premium theme, so please use their official support channel. We feel they are best equipped to support their products.

https://themegrill.com/contact/

Commercial products are not supported in these forums: https://make.wordpress.org/support/trouble/section-1-getting-started/what-is-not-supported

Thread Starter cpairus
(@cpairus)

3 years, 2 months ago

linards…. I put that into the CSS but it didn’t change anything…. Should I have removed the /instruction/ code or does it matter with the /…. /

Moderator bcworkz
(@bcworkz)

3 years, 2 months ago

/* this is a CSS comment, it's fine */
You could try the !important modifier, like this:
font-size: 24px !important;

If that doesn’t help, you’d best follow Steven’s advice.
Linards
(@linardsn)

3 years, 2 months ago
Like @bcworkz said, try to add !important
```
@media screen and (max-width: 768px) {
  .flash-responsive-menu .menu-toggle {
    font-size: 24px !important;
    color: #000 !important;
    background-color: #f1f1f1 !important;
    padding: 10px !important;
  }
}
```
If this does not work, then contact the support of plugin.
- This reply was modified 3 years, 2 months ago by Linards.