Display Issues effecting desktop and mobile viewing

Hi,

I’m using Sydney theme and having a couple of issues with display.

The first issue is when I click onto the call to action on the front display it takes me down to the content but a small fraction of the image still displays. (both on mobile and desktop)

The second issue is with the mobile menu. I have already used CSS to bring the title and hambuger icon in line however, the mobile menu when clicking to expand leaves some space.

Is there any way to overcome these issues?

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba

the web address is webdesignbyalex.co.uk

Hi,

You can fix the menu spacing issue with this Custom CSS:

@media only screen and (max-width: 767px) {
#mainnav-mobi {
    top: 55px !important;
}
}

The other issue ( from your screenshot nr. 2 ) I can’t find, because when I click on your call to action it takes me to an other page, it doesn’t scroll as you said, so please let me know how can I reproduce the issue, there, so then I can check

Kind Regards,
Csaba

Hi,

I’ve applied that change and that has fixed this issue.

The second screenshot is the main header call to action which is tagged to go down to #primary on the main page.

image

Hi,

That button links to: https://welcome.unibet.ro/ro/pop/sportsbook/general/index.html?mktid=1:81750186:4995680-27320 - maybe your website was hacked and those types of links was placed in your code? Please do a security check using Sucuri or Wordfence plugin.

Kind Regards,
Csaba

Looks like there was an issue which has been fixed there with a virus. This should now all be resolved try that button again to see what I mean.

Hi,

You can fix that gape between the slider and the menu when you press the call to action button with this Custom CSS:

.home #primary {
    margin-top: 30px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Thanks for your help so far - I’ve tried this but it doesn’t seem to of made any difference at all.

Hi,

Ok, I see the issue now, the space is because of the sticky nav there is a placeholder space left for the sticky menu, so if you make the menu sticky on mobile that area is covered by the sticky menu. Do you want to remove the space or make the menu sticky on mobile instead? Please let me know.

Kind Regards,
Csaba

Hi,

Thank you for your reply. I think the sticky menu on mobile would be better than removing the space.

Hi,

You can make the menu sticky on mobile devices with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header.fixed {
    position: fixed!important;
}
}

Please let me know how it works.

Kind Regards,
Csaba