[Jay Han]

Hello.
My website is https://www.ivisitkorea.com
I applied floating menus and it works well on desktop browsers.
But on mobile, it becomes transparent when I click it on the post.
It has a white background only on the mobile homepage.

I added additional CSS as below.

a {
color: #ee9e03;
}

#site-header-right-menu {
display: none;
}

#site-header-right-menu .search-form {
display:none;
}

Thank you for your help in advance.

Kindest regards,
Jay Han

[Skandha]

@jay-han: Hello Jay Han,
I checked your site and you seem to have solved the menu issue on mobile phones. Is the issue resolved?

Let me know if you have anymore issues.
Kind Regards,
Skandha

[Jay Han]

Hi Skandha,

The problem is not solved and I’ve got a few more problems.

1. Problem: Floating Menus become transparent when clicking it on mobile post
– Menus are not transparent on the first landing page. It happens on the posts or pages.
– Please, access to the post on mobile, https://www.ivisitkorea.com/how-to-rent-a-car-in-korea/
– Click Menu on the top of the page, and scroll down, then you can see the background of the menu texts is transparent

2. Google Search Console sent an error notification about the ‘Mobile Usability’ of below page.
– Error Type: Text too small to read
– Error Page: https://www.ivisitkorea.com/how-to-rent-a-car-in-korea/
– I think it’s because of the small text sizes of Tagline, Menu, and categories.
– How can I change the text font sizes of them?

Please, help me to figure out these problems.

Best regards,
Jay Han

[Skandha]

@jay-han: Hello Jay Han,

Problem 1: Are you using Catch Sticky Menu plugin on your site? Also can you try deactivating all other plugins and check if the issue gets resolved?

Problem 2: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To increase font size of Tagline */
.site-description {
    font-size: 20px;
}
/* To increase font size of Menu */
.site-navigation a {
    font-size: 20px;
}

Can you clarify which categories you are referring to?

Let me know if this helps you out!
Kind Regards,
Skandha

[Jay Han]

Hi Skandha,

Thank you for your help. Size of tagline and menu has been changed.

1. I want to change the text size of the current category name presented under the post title. The small gray current category, written under the post title when people access the post.

2. I am using sing Catch Sticky Menu plugin to use the sticky menu when people scroll down the pages. I tried to deactivate other plugins and it continued. The problem happens only on mobile and on the posts and pages. Did you see the problem?

Kindest regards,
Jay Han

[Skandha]

@jay-han: Hello Jay Han,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* 1. To change the font size of Categories in single post/page */
.single .entry-meta {
    font-size: 17px;
}
/* 2. For the catch sticky menu issue on single post/pages */
#site-header-menu {
	top: 46px;
	background-color: rgb(255, 255, 255);
	z-index: 9;
	opacity: 1;
	height: 70px;	
}

Let me know if this works out!
Kind Regards,
Skandha

[Jay Han]

Hi Skandha,

Category text size problem is solved. Thank you.
But, when I add your code 2. ‘For the catch sticky menu issue on single post/pages’, the background of the menu bar changes to white color on desktop(doesn’t change it on mobile). > I changed the bg color of the menu to the bg color of the main image,
and then when I click the menu of the homepage on mobile, the background of the menu is transparent.

Won’t happen these kinds of problems on a paid version?

Kind regards,
Jay

[Skandha]

@jay-han: Hello Jay,
Can you add the above CSS code as Additional CSS in your site so that I can test it?

The issue you are having on your site is not present at my end so there should not be any problem with the pro version. The Catch Sticky Menu Plugin is working all fine. I feel this may due to the Autoptimize plugin you are using. Can you deactivate that plugin and let me know?

Kind Regards,
Skandha

[Jay Han]

Hi Skandha,

I tried to deactivate almost all plugins but the problem continued.
When I add the below code you sent, it works weirdly. So I can’t leave the site like that.
If you let me know your email, I’ll send you photos how it works after I add that additional CSS.
Or I’m not sure if it’s possible but is there any way to check it on my WordPress account?

/* 2. For the catch sticky menu issue on single post/pages */
#site-header-menu {
top: 46px;
background-color: rgb(255, 255, 255);
z-index: 9;
opacity: 1;
height: 70px;
}

Current problems are;
– When users click the sticky menu on mobile, in categories or posts, the bg of opened menus are transparent and unclickable. It isn’t transparent when I click the menu at the top of the post or category.
– On the desktop computer, it works well. And no problem at the homepage on mobile as well.

Current additional CSS is like this;
a {
color: #ee9e03;
}

#site-header-right-menu {
display: none;
}

#site-header-right-menu .search-form {
display:none;
}

/* To increase font size of Tagline */
.site-description {
font-size: 16px;
}

/* To increase font size of Menu */
.site-navigation a {
font-size: 16px;
}

/* 1. To change the font size of Categories in single post/page */
.single .entry-meta {
font-size: 16px;
}

Kindest regards,
Jay Han

[Skandha]

@jay-han: Hello Jay,
Can you provide me your WP Admin Credentials so that I can look into all the issues? I will contact you shortly by email.

Kind Regards,
Skandha

[Skandha]

@jay-han: Hello Jay,

The issue disappeared when I disabled all the plugins. This maybe due to plugin conflict. You will need to disable all your plugin and then enable them one by one to see which plugin is the culprit. For more information regarding plugin conflict you can check out this link.

Let me know if this helps out!
Kind Regards,
Skandha

[Jay Han]

Hi Skandha,

I see. Thank you so much for your help.
I’ll try to do it and let you know.
Thanks again.

Kindest regards,
Jay

[Author]

Posts