[Anon User]

Hi

Please help.

I need to change how the header looks on a mobile phone.

https://www.asphaltgroup.co.za/

There are two logos in the header. One on each side of the title of the site in normal desktop view, but i need the logos to be next to each other above the title when being viewed from a mobile phone.

I also need the colors to change of the navigation menu when viewed from a mobile phone.

Please assist if possible.

Kind regards

[sujeet]

Hello @anon-user,

I am unable to view your website. It’s showing The connection has timed out. Can you please check?

Kind Regards,
Sujeet

[Anon User]

Apologies, our hosting provider went down yester day. It is back up today.

[sujeet]

Hello @anon-user,

Yes the site is fine now. Please follow the instruction below:

– Kindly add the following css code to Dashboard -> Appearance -> Editor -> Styles -> Addtional Css.

Please check the screenshot below:

Css code:

@media (max-width: 781px) {
.uagb-container-inner-blocks-wrap .wp-block-columns > .wp-block-column:nth-child(1),
.uagb-container-inner-blocks-wrap .wp-block-columns>.wp-block-column:nth-child(3) {
    flex-basis: 25% !important;
}
.uagb-container-inner-blocks-wrap .wp-block-columns > .wp-block-column:nth-child(1) {
    order: 1;
}
.uagb-container-inner-blocks-wrap .wp-block-columns > .wp-block-column:nth-child(2) {
    order: 3;
}
.uagb-container-inner-blocks-wrap .wp-block-columns > .wp-block-column:nth-child(3) {
    order: 2;
}
}

@media (max-width: 1199px) {
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--foreground) !important;
}
.wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--secondary) !important;
}
}

Hope the code worked. Let me know please.

Kind Regards,
Sujeet

[Anon User]

Great! It seem to work for android and mostly iphone.

I see there are some weird behavior on iphone for the rest of the site aswell. Is there a way to make it look on iphone as it does on android?

I have a feeling is the aspect ratio or resolution on iphone that is throwing it off.

[sujeet]

Hello @anon-user,

That’s strange. We checked here and found everything is fine. Can you please share your screenshots of the iPhone? Thank you.

Kind Regards,
Sujeet

[Anon User]

Please advise on how i can upload or paste a image?

I do not see the option on how i can send it to you.

[sujeet]

You can upload the image here and send us link.

https://imgbb.com/

Kind Regards,
Sujeet

[Anon User]

Apologies for the delayed response.

Iphone View:

https://ibb.co/89qKNqp

Andoid View:

https://ibb.co/P5F1k8c

[sujeet]

Hello @anon-user,

The site is fine in both Android and iPhone as well as in Mac. We have checked here. Please check attached screenshots.

iPhone:

Mac:

We suggest you to remove unnecessary padding and margin you have used for blocks and that is causing the issue in mobile.

Kind Regards,
Sujeet

[Anon User]

Yes thank you i think i fixed it myself.

[sujeet]

That’s great @anon-user

[Author]

Posts