Docs

[jonelsworth]

Hi,

On mobile devices the header image appears very small and the mobile menu doesn’t work for my domain http://thepolicememorialsite.org – please can you tell me how I can address these issues?

WP version 4.6.1
X version 4.4.1

Many thanks in advance.

[Joao]

Hi There,

I am getting this message when trying to acess your website:

This site can’t be reached

thepolicememorialsite.org’s server DNS address could not be found.

Can you confirm it is correct?

Thanks

Joao

[jonelsworth]

Hi Joao,

Yes it’s correct – I’ve just tested it:

Home

Can you try again please?

Many thanks.

[Rupok]

Hi there,

Thanks for writing back. Your image is only 200px in height but 1200px in width. So it looks small in smaller screen which is pretty expected.

And also you don’t have any menu item in primary menu and made it hidden with CSS. Let’s add this as well to hide the mobile menu button as it has no use now :

.x-btn-navbar {
  display: none !important;
}

Hope this makes sense.

[jonelsworth]

Thanks Rupok – so if I add items to the primary menu then it will work on mobile devices?

Also, what size do you recommmend the image should be?

Kind regards.

[Joao]

Hi There,

I believe that in order that your website works better on mobile you should add links on Appereance > Menu to your website, so the links on your mobile navigation button will work, right now they are at the bottom what is not very user friendly.

If you need help after you add them we can help you to hide the links on desktop.

Regarding your logo image, since a desktop view has pretty much an opposite proportion of a mobile phone I recommend you switching logo when in mobile view to a different size, something like 480 x 200 or whatever you like better. Once you have uploadded this image to your WordPress Media Gallery.

Add the following code to Appereance > Customizer > Custom > CSS

Adjust the parameters according to your needs and also add the correct image path URL

@media (max-width:979px){
.x-brand img {
display: none;
}
a.x-brand.img {
background: url("www.police.com/images/yournewlogo.png") no-repeat 0 0;
width: 100%;
height: 200px;
display: block;
}
}

Hope it helps.

Joao

[jonelsworth]

That’s fantastic Joao – many thanks for your excellent support.
I will give this a try.

[jonelsworth]

That worked – again many thanks.

I just have 2 small issues now – on mobile devices the mobile menu icon slightly overlaps from the blue onto the white background below. Also, the Header text (eg. Homepage) is being overlapped by the Search bar is there a way to reduce the size of the heading text on mobiles, or reduce the size of the search bar perhaps (or even turn it off on mobile devices)?

Kind regards.

[Rad]

Hi there,

What mobile size you’re testing it on? I checked it on 375px device and there is no overlapping.

As for the mobile menu, please add this CSS as well,

.x-btn-navbar.collapsed {
margin-bottom: 10px;
}

Hope this helps.

[jonelsworth]

Hi,

Thanks yes the mobile menu looks fine now.
The only issue is the Search bar overlaps the text on mobile devices.

See this page for instance:
http://thepolicememorialtrust.org/the-memorial

The Header text is partially covered by the Search bar.

Kind regards.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 480px) {
.mysearch.right {
    position: static;  
    width: 100%;
    margin-top: 10px;
    float: none;
    display: block;
}
}

Hope that helps

[jonelsworth]

That’s great – and it worked! (although just needed to change float: none to float: center)

Many thanks

[Joao]

Glad to hear it,

Joao

[jonelsworth]

Can I ask one more question?

How do I remove the side menu from mobile devices?
If currently appears at the bottom of the page above the footer.

Many thanks.

[Joao]

Hi There,

You always can ask as many questions as you want 🙂

Please add the following code to Appereance > customizer > Custom > CSS

@media(max-width: 769px)  {
div#nav_menu-3 {
    display: none;
} }

Hope that helps

Joao

[Author]

Posts