Docs

[afleischer]

I’m getting some really strange mobile-responsive behavior from my site.

1. http://www.maisonrealestate.com – when you open this link on a mobile device, the desktop menu is shown instead of the mobile menu, and the after-masthead slider seems to infinitely zoom in.

2. I’ve got the header set to transparent, which is what the client wants on the desktop. I am able to see what the mobile version should look like in Cornerstone; however, when I click on it, the background image slides down, creating a white background. Since the Menu items (and menu button) are white, they become invisible, so once I get the mobile responsiveness working outside of Cornerstone, I expect this to be an issue:

How can I either stop the background from moving down on mobile, or make the header non-transparent on mobile only?

Best,
Andrew

[Jade]

Hi Andrew,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[afleischer]

This reply has been marked as private.

[Jade]

Hi Andrew,

Whenever I try to access the login page, I could only see a blank page.

Would you mind double checking if the login page link is right?

Thank you.

[afleischer]

This reply has been marked as private.

[Lely]

Hi There,

1.) This is because of iframe forwarding. Your site is loaded via iframe on this domain:http://www.maisonrealestate.com/. Please check in with your hosting about this.
Please check the following link:
https://wordpress.org/support/topic/responsive-theme-not-responding-when-domain-forwarded/
https://en.forums.wordpress.com/topic/forwarding-masking-kills-mobile-theme

2.) I can’t seem to duplicate the issue.

[afleischer]

Ah, that was the first issue, thank you Lely! it’s totally the domain forwarding! I’ll contact the hosting provider to take care of that. Unfortunately, the second question’s still an issue:

2. I’ve got the header set to transparent, which is what the client wants on the desktop. When I click on the mobile menu, the background image slides down, creating a white background. Since the menu items are white, they become invisible:

I can’t make the menu items dark by default, or they won’t show up on the desktop home page background. I’m open to multiple solutions here: if I can manage to disable the slider on the mobile version of the site, and use a background image, that’s fine, or if there’s a way to keep the slider from being pushed down by the menu, that works, or if I can change the background of the mobile drop-down menu to a darker color, that works too, whatever’s the easiest solution!

Best,
Andrew

[Christopher]

Hi there,

#1 To disable slider add followng code in customizer :

@media (max-width:979px){
.x-slider-container.below {
    display: none;
}
}

Add a section, insert background image and use visibility options to display in on medium, small and extra small devices.

#2 To prevent slider from being pushed down, add this code :

@media (max-width:979px){
.x-navbar-wrap {
    height: 30px;
}
}

#3 To change background color, try this code :

@media screen and (max-width: 959px){

.ubermenu-responsive-default.ubermenu-responsive.ubermenu .ubermenu-nav li {
    background-color: #000 !important;
}
}

Hope it helps.

[afleischer]

Thank you so, so much – didn’t expect all three solutions! This gives me great options!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts