Top navigation not correct on mobile devices

[Lara Marsh]

Bill –

For the Essence Hospice website (link above) we are getting a really bad display of the navigation links at the top. They wrap around and overlap and it’s nearly impossible to use them. Do you know how I can fix this?

Thanks –
Lara

[Bill Robbins]

Hey Lara,

Good question. I would look at updating to the current version of the theme. You can download it from the right hand sidebar on our support site.

It changes out the menu on mobile devices for a select menu that fits better and is easier to use.

That version also has automatic updates to make updating in the future easier.

If I can help, let me know.

Thanks,
Bill

[Lara Marsh]

Thanks, Bill.

My theme is not saying it needs to be upgraded. Are you suggesting I reload it anyway? I am hesitant to try that. 🙂

Lara

[Bill Robbins]

Updates from the dashboard were added in a version later than the one you’re using. That’s why you’ll need to download here to get the update. You can install it like you would a new theme. It will leave your current foundation theme alone. I would copy out your settings, especially your custom css so you can add them into the next version.

[Lara Marsh]

Bill –
I updated the theme. It’s causing a few problems, namely the image size at the top of the home page and Dreams page. I am working through those. However, this update did not fix the mobile display issue. I think it may be the way I created the menu. Please see our conversation about this at https://support.organizedthemes.com/forums/topic/element-positioning/#post-10952

Is something there not working right for mobile devices?

Thanks.

[Bill Robbins]

Lara,

Looking at the source code of that page, the output of the mobile menu is missing. Let’s try this. Go to the Appearance section and select Menus. Choose the “locations” tab and make sure that your main menu is assigned to the “Left Side Navigation Bar” location and then save your menu. Hopefully that will bring up the output.

If that doesn’t do it, we’ll need to check the header.php file and make sure it’s correct because it looks like a section is missing.

Let me know what you turn up,
Bill

[Lara Marsh]

Bill,
Thanks. I had it set to Right Side Navigation Bar. I changed it to Left. Mobile output still wonky.
Lara

[Bill Robbins]

It’s still not there in the code. Could you email over a login so I can take a look for you? You can make a private post here or email it to support@organizedthemes.com

Thanks

[Bill Robbins]

Perfect. It looks like that was a modified version of the old header file. The theme added some code to the header.php file to load up the mobile menu. I added that in and it appeared for you.

The slider is made to be about 2/3 of the width of the content area with a widget spot next to it. It looks like that’s what you have now, just without any widgets in the home top yet.

If you’d like to make it full width, this is how I would go about it: https://support.organizedthemes.com/forums/topic/full-width-image-slider/

Let me know if you need any help,
Bill

[Lara Marsh]

Thanks so much, Bill! I see the mobile nav now. Excellent. I’ll take a look at the article link you sent for my image issues.
Best,
Lara

[Lara Marsh]

Bill –

I did the suggestions in your post on making the image full width. It didn’t seem to work. I made a few other changes and was able to get the image to work on an interior page but not on the home page. On the home page, it is forcing the image to be 400 x 400 which is completely bizarre to me. I have no idea where this is being set. Here’s a snippet of the developers view on Firefox. What do you think?

Thanks again.
Lara

Attachments:

1. 

   400x400.png
   

[Bill Robbins]

Lara,

We’re almost there. WordPress only resizes images at the point of upload, so if you change an image size, it will only affect images from that point forward.

There’s a plugin called regenerate thumbnails that you can use to resize your existing images. I went on and installed/ran it for you. That seems to have your slider back in place.

If you run into trouble, let me know.

Have a great weekend,
Bill

[Lara Marsh]

THANK YOU SO MUCH. I really appreciate it. Looks great.
Lara

[Bill Robbins]

Fantastic. If you need anything else just let me know.

[Author]

Posts