Good day
The desktop version of our site looks great but on mobile view it completely changes. All the horizontal elements become vertical and I would like to know how to resolve this. the site is www.drnmmoola.co.za. All the pages look great on desktop view but completely different on mobile view.Thank you in advance
Warm regards
Hello there,
Do you mean your site is not responsive on mobile device?
I visited your website and it is only showing a coming-soon page. Let me know when your site goes live, so I can check it directly.
Adding, if possible, please take a screenshot of the issue on your mobile device, and update it here.
Regards,
Kharis
aThemes Support
Hi Kharis
Thank you for the reply. I have made the site live.
Warm regards
Thank you for updating me.
Can you share a screenshot of the issue you’re seeing on mobile?
Please visit our demo site for Sydney and confirm whether you can get the same issue or not.
Regards,
Kharis
aThemes Support
Thank you.
The header is supposed to be the dark red as the desktop. And the social media icons are horizontal as well as the pics. Also the menu is black not that dark red
Hello there,
Thank you for updating me with a screenshot.
If I am not getting it wrong, you want to have desktop layout on mobile view. Is that correct?
Regards,
Kharis
aThemes Support
Hi
Yes that is correct. Would this be possible?
If not, would I be able to change the header to the header we have on the desktop and make some content horizontal?
Thank you
Hi,
That’s not possible. I am afraid. Because the header area is designed that way for responsiveness purpose. So that the menu items are still accessible on any smaller screens. If we implement desktop-like header area, not sure about the menu accessibility. I hope you are aware with this.
Regards,
Kharis
aThemes Support
Hi
Thank you. Could we atleast change the header to the red that we have? And the menu color from black?
Warm regards,
Hi,
Thank you for getting back.
To change the header background color on mobile screen, add this CSS code to Appearance > Customize > Additional CSS from dashboard.
@media only screen and (max-width: 1024px) {
#masthead.site-header {
background-color: #b00e0e;
}
}
I hope this helps.
Feel free to raise a new topic for your other question. Please note that use one topic for one question and you’re welcome to have unlimited number of topics.
Regards,
Kharis
aThemes Support
Hi.
Thank you so much. I will try that. To change to the menu color from black to dark red?
Also, we have a picture as a header. Can that be the header on mobile as well?
Hi,
Please accept my apologies for the delay in response. I really appreciate your patience.
Try adding this CSS code to your site’s Additional CSS.
#mainnav-mobi {
background-color: #7d0a0a;
}
It should be appearing on mobile screen when you choose header image. If it doesn’t, you might need to update the theme to the latest version.
I hope this reply helps. Let me know in new topics for your other questions. Please use one topic for one question to make us easier track progress and help maintain our support forum in good order.
Regards,
Kharis
aThemes Support
hi
thank you. we ave updated the theme and it is still not showing the header image. Kindly advise
Thank you for updating me.
I tried to directly inspect the problem by visiting your website. But it seems likely it is not yet available for public access and the screen is only showing a maintenance mode text.
Is there any other way I can access it?
Regards,
Kharis
aThemes Support
Hi
I have made it public, Please do have a look and let me know. Thank you very much
Hi @kharisblank. Have not heard from you. I have sent you a direct email. Kindly advise at your earliest. Would love to get the website launched asap
Hello there,
Please accept my apologies for the delay in response. I really appreciate your patience.
I checked your website and it is now using slide header. And it seems likely you don’t need to show header image on mobile screens. Is that correct?
Regards,
Kharis
aThemes Support
Hi Kharis
Thank you for the response. We would really like the header image of possible as it fits in with the whole theme
Hello there,
Please accept my apologies for the delay in response. I really appreciate your patience.
When you enable header image, it will not be appearing on smaler screen. Avoid this, you can add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.
@media only screen and (max-width: 1024px) {
.site-header .header-image {
background-image: url('https://yoursite.com/ path/to/your/image.jpg');
height: 400px !important;
}
}
Replace https://yoursite.com/ path/to/your/image.jpg with your image file from media library (Dashboard > Media).
I hope this reply helps.
Regards,
Kharis
aThemes Support
Hi
Thank you. I have added this but it did not work