Menu Icon Display – Desktop versus Mobile

[jwchameleoncorp]

Hello,

I noticed top menu items don’t display correctly on mobile. Some get pushed down next to the logo. See attached for example.

Is there a way to ensure the icons display on the top menu, in both mobile and desktop?

Thanks!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, how do you want it to look like?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jwchameleoncorp]

Hi @laura

Look at the snap shots attached to the original post. One is of a desktop display, and the other is a mobile snapshot (icons circled in red.)

As you can see, for some reason on mobile, the icons in red are not displayed in the top navigation area.

I want the icons to stay in the top navigation on mobile display, like in the desktop snapshot.

How do I do that?

Thanks.

[Laura]

Hello, i am trying to se it but i do not see it at your site, let me know how can i see it 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jwchameleoncorp]

You have to look at it on mobile. Did you try that?

[jwchameleoncorp]

This reply has been set as private.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jwchameleoncorp]

Thanks @laura 🙂

[Radu]

Hi,

Let me know if this problem appears on the demo ?!

If not it means that one of your custom CSS can cause that

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @radu

I checked all the Kleo Demo’s, but all of them have the CART in the Primary Menu. My CART is in the Top Menu. As a result I could not duplicate the issue, since Kleo’s CART default location is different.

However, I have a Kleo Demo of my own that I use when I want to experiment or try things without touching my primary domain. It is a minimal install, with no customization, no CSS changes, etc.

Using my Kleo Demo, I placed the CART in the top menu, and indeed, I had the same issue. I attached snapshots for you.

So it seems that it’s an issue with Kleo itself.

Thanks for working on this for me. Really appreciate your help.

Cheers.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

I cannot see any problem using cart on top menu on mobile, it looks identically on my local install on mobile layout in both cases keeping the cart icon on top menu or on main menu.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

That’s strange. Can you see it on my install?

[Radu]

Yes, it look like as it should like on my locall install

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Can you please view my website on desktop & mobile, and send me a snap shot of what you see?

[Radu]

Hi,

Desktop screen here :

Mobile, below, as attachment.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Desktop screen here :

Mobile, below, as attachment.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[jwchameleoncorp]

Hi @radu

Please take a closer look at your snapshots. You will see that you are getting the same erroneous results I am.

On mobile the shopping cart is displaying in the Main Header area (next to the logo) and not in the top menu area, like on desktop. The icons should stay in the top menu, next to the other icons. They should not be floating in the Main Header area next to the logo.

If you use the login credentials I gave you, you will also see that the notifications icon does not display correctly either.

I have both icons are set to display in the top menu, but they do not on mobile.

How do I fix them so they display properly?

Thanks.

[Radu]

Hi,

I’ve thought that you want to have cart like that, there is no ready solution to can keep the cart icon in topmenu on mobile, anyway the cart will be to small to can be tapped on mobile that’s why it’s placed directly there,to can be tapped on mobile.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @radu

Look at reply #146092 in this support thread. You’ll find a snapshot attached that shows other icons in the top menu (including the User Profile icon, which by default displays in the top menu), when you are logged in.

I’ve tested it extensively. All the icons, including the User Profile icon, are easily clickable/navigable on mobile.

For UI, icons should not float around the logo, and should remain consistent for the user (i.e. in the top menu like on desktop.)

How can we get the icons to remain in the top menu, when displayed on mobile?

Thanks for your help.

Cheers

[jwchameleoncorp]

@radu – Referring to my last reply, the ticket number is #146029

[Radu]

Hi,

For the mobile layout cart display and notifications display use this CSS

COPY CODE

@media (max-width: 991px) {
.kleo-toggle-menu, .kleo-toggle-menu .kleo-toggle-submenu {display:initial;}
.kleo-mobile-icons { display: none;}
}

The Css will be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @radu

Thanks for the code. I placed it in the Quick CSS.

See snapshots for results.

As you can see, the Cart and Notification icons are gone from the logo area (perfect), but now they do not appear anywhere. The intent is to have them display in the Top Menu (where the red arrows are), so it displays like the desktop.

I checked the profile toggle menu, and the main menu, but the icons are not there either (as you can see in the snap shots).

Do I need to add something to the code?

Thanks a ton for your help!

Cheers.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Add this CSS after the previous CSS

COPY CODE

.top-bar .kleo-menu.kleo-notifications-nav,.top-bar .shop-drop {
    display:inline-block !important;
}

It should be ok with this CSS, I’ve checked.

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Works perfectly! Strong work as always Radu! Thanks a ton. 🙂

[Radu]

Great!!!
You’re welcome

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts