White strip on front page on mobile devices

Hello. There is a small white strip between the header and content on mobile that I am trying to remove. I am unable to get it right without causing issues on desktop. Please could you login and check my setup to make sure it is correct?

Hello,

Please add this CSS to the Theme Settings > Custom CSS:

.main-page-wrapper {
   padding-top: 0px;
}

Best Regards

Hello. This seems to have addressed most of my issue. However on the single product pages there is the ‘back arrow’ that is covering the header now. I would actually like to remove the arrow / grey section entirely. Is this possible?

Hello,

Remove the CSS from Theme Settings > Custom CSS to home page > Page settings http://prntscr.com/jpdw1i

And add it to each page with the problem.

Best Regards

Hi there. I am having an issue on tablet. It appears the header / logo does not fit. Can you assist with fixing this?

Secondly the active link on mobile menu I can’t see. How can I change the text color of the active mobile menu link?

Hello,

I cannot check this on your site access forbidden. Please enter the editing page mode, find the row which contains the element of the map and check Design option tab. Set zero in all the margins and paddings. If it does not work, provide site admin access.

Best Regards

Sorry for the delay in response as I had to renew my support. This issue is on every page of the website for tablet devices.

I have changed to the primary directory which is why you couldn’t log in. Below you will find the new URL.

To restate the issues:

1. On tablet devices the logo does not fit within the header container
2. On mobile / tablet devices the active page is not visible on menu (brown text on brown bg)

Thank you

Hello,

Here is logo on the tablet http://prntscr.com/jtaabv and this one http://prntscr.com/jtaaj9

I do not see any problems with the logo. If you do not like it change the header height in Theme Settings > Header Layout > Header height

As for navigation check this http://prntscr.com/jtabk3 remove this CSS.

Best Regards

Hello. I think you might have mistaken me. I would like to keep the CSS in order to keep the background that color. I would like to change the active link text in the menu to white.

Hello,

Please try this CSS code

.main-nav .menu > li.onepage-link.current-menu-item > a{
color:#fffff!important;
}

If the code does not work, please provide your site admin access.

Best Regards

Does not seem to work. You will see I’ve added it to mobile and tablet at the end of custom CSS. Provided login details.

Hello,

So, you have two issues:

1. On tablet devices the logo does not fit within the header container: please add this CSS to Theme settings > Custom CSS > Global

@media (max-width: 991px){
.main-header .site-logo {
    width: 20%;
}
}

2. On mobile / tablet devices the active page is not visible on menu (brown text on brown bg), try this code:

.mobile-nav ul li.current_page_item > a {
   color: white!important;
}

Best Regards

[Author]

Posts