Mobile Menu Invisible

Tagged: Mobile Menu

This topic has 7 replies, 2 voices, and was last updated 6 years, 10 months ago by Pratik.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 13, 2018 at 9:30 pm #129711

ydigilov
Participant

http://www.historyofphilosophyofscience.org/

When my site jumped to the mboile menu, two strange things happen.

1.) By opening the mobile menu, it expands to the primary nav, but the options are too far on the left to be seen.

How do I shift it to the center and make sure it isn’t covering any content?

2.) When you open the mobile menu, the “MENU” text stays in the middle and can’t be closed.

How do I change the z-index to make it clickable and move it out of the way of the opened mobile menu?

January 13, 2018 at 10:55 pm #129733
Pratik
Participant
Hi @ydigilov,

The error is due to custom css you have added in Appearance=> Customize=> Additional CSS box. It is due to following code:
```
.site-navigation .primary-menu
{
	/*border-top: 1px solid #3b6cb4;
border-bottom: 5px solid #3b6cb4;*/
	margin-top: -170px;
float: right;
	width: 1100px;
}
```
So you can replace this code with following and your site should run fine:
```
@media only screen and (min-width : 1300px) {
    .site-navigation .primary-menu
        {
	    margin-top: -170px;
            float: right;
	    width: 1100px;
        }
}
```
Let me know how it goes.

Regards,
Pratik
January 15, 2018 at 11:42 am #129793

ydigilov
Participant

You the man, Patrik!

January 16, 2018 at 1:27 am #129825

Pratik
Participant

Hi @ydigilov,

Thanks :D, if you liked my support, please leave a review at https://wordpress.org/support/theme/high-responsive/reviews/#new-post. It will a great boost for me 🙂

Regards,
Pratik

February 12, 2018 at 5:59 pm #131559

ydigilov
Participant

Do you know why the hamburger menu for mobile is not clickable on the body pages:

http://historyofphilosophyofscience.org/the-society/
http://historyofphilosophyofscience.org/membership/
http://historyofphilosophyofscience.org/contact/

but it works on the main page
http://historyofphilosophyofscience.org/

February 13, 2018 at 11:15 pm #131606
Pratik
Participant
Hi ydifilov,

Custom CSS is causing this issue. Add following code to negate it.
```
@media only screen and (max-width : 1024px) {
   .site-header-main {
       margin-bottom: 40px;
   }
}
```
Regards,
Pratik
February 15, 2018 at 5:22 pm #131722

ydigilov
Participant

Ah ok, do you know why the logo diminishes in resolution at times for the mobile site? It happens on a number of browsers, but not all.

February 15, 2018 at 10:33 pm #131732

Pratik
Participant

Hi @ydiglov,

I cant be 100% sure but you have increased logo size via custom CSS code. This code might not be compatible on all browsers. This is why there are browser related issues. If you can be specific about browser, I can check if for you.

Regards,
Pratik
Author

Posts