Header and Menu Issues In Mobile View

Sparkling
1

Hi guys,

Firstly, thanks for making such a great theme. I’ve had a lost of fun customizing, and I’m now so close to the finished product — you can see the results at MindThatEgo.com.

On desktop, the view is exactly how I like it. Perfect. Unfortunately, I’m having issues with mobile view. The issues are:

  1. The header image overlaps the top header.
  2. The menu button doesn’t work properly.

I’m really hopeful you’ll be able to give me some assistance, I’m banging my head against the wall here. Is there some way I can add additional CSS for mobile view, so that the menu and header will display correctly?

I’m all ears and hopeful you’ll be able to assist.

Many thanks in advance,

Ricky

2

Hi,

Just to add to the above, the header image works okay on iPhone 6, but doesn’t work on portrait view on iPhone 5.

The menu isn’t working on either device, but works fine on desktop.

Thanks

3

Hi Ricky,

I hope you are well today and thank you for your questions.

1) The header image overlaps the top header.

I don’t see this issue on your shared site so could you please share me the screenshot of the issue?

2) The menu button doesn’t work properly.

You can try resolving this issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.navbar-collapse.navbar-ex1-collapse.collapse.in {
    background-color: #363636;
}
.navbar-default .nav>li {
    z-index: 999;
}
.navbar-default .navbar-nav>li>a {
    background-color: #363636;
}

Best Regards,
Movin

4

Hi Movin,

Many thanks for your response.

I’ve added the additional CSS, but, unfortunately the menu still appears behind the post on the iPhone 5. In the preview on Wordpress, it appears correctly, although when I hover over, the box is transparent. Any ideas what the issue is?

Attached is a screenshot of the mobile view / image header. Another remedy may be increasing the size of the black background in mobile?

5

Please temporary disable the W3 Total Cache on your site so that i can troubleshoot the issue.

6

Hi Movin,

Thanks for the response — I’ve now disabled the plug-in.

7
I’ve added the additional CSS, but, unfortunately the menu still appears behind the post on the iPhone 5. In the preview on WordPress, it appears correctly, although when I hover over, the box is transparent. Any ideas what the issue is?

It is working fine for me as shown in the attached screenshot.

Please try clearing your browser cache or using different browser.

8

Hi Movin,

Thanks for getting back to me. What browser and device did you use to get the menu to display correctly? The issue is, it won’t display correctly in the “appearances > mobile view”, or on my iPhone 5 (Safari).

I’m concerned that takes up a large portion of potential readers so I still need a fix. Any ideas? Is there additional CSS I can add so it always appears above the top post?

9

I am using chrome browser.

Please test it clearing your browser cache.

Also you can try changing the value 999 to 99999 in the above shared CSS code.