Unresponsive theme - nav bar breaks in mobile/tablet mode

Guys, please help.

You're breaking my heart here.

I'm now testing my site in all modes and I can see that it FALLS APART when I go to responsive mode. There's a bunch of white space at the top and bottom of pages and the nav bar is all over the place. I'm so gutted. Please help.

I'm hoping to be testing the site with beta users next week and at this rate I'm just not gonna be ready. I'm begging you here...can you help? Don't make a grown woman cry. And for god's sake think of the children!

Have a look at my screen shots and let's have a good old weep together. My site is http://www.hushhushvoiceovers.com

Hold me, WPMUDEV.

Emma

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma,

    I hope you're well today and thank you for your question!

    I took a look at your site and I can see what's the issue here. I tried to access your site via a support access that you've granted but I keep getting an "Invalid token" error. This usually means that something went wrong during the process or that it's about to expire. That said, could you please re-grant it for me so I could take a closer look?

    However, first please try editing your site a bit more using an Upfront editor. Basically, you'll want to switch editor to "Responsive mode" (button on the left of the main "Save" button) and then switch between modes (desktop, tablet, mobile) in the top bar and adjust site layout for each of these modes. For example:

    The "bunch of white space" is in fact an Upfront region that's too big to fit next to the site logo. You will want to resize/reposition it while in "tablet" and/or "mobile" Upfront mode. This should help you fix the issue.

    Best regards,
    Adam

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hey Adam, thank you so much for coming back to me - I really appreciate it. I think one of your guys - Tyler - is working on my site right now with a css issue? He's disabled the WPmuDEV dashboard so I can't re-grant you access. Maybe he can help us? Currently my site is in temporary mode so I think Tyler may be knee deep in my css as we speak. Alternatively, as soon as I see the WPMUDEV dash again in my menu I'll grant access and hope for the best.

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hey Adam, Tyler's still working on my site so as soon as the WPMUDEV dashboard appears in my WP dash again, we'll be able to get this sorted. I'd also be grateful if you could confirm that the theme works across all browsers. We're just about to enter our testing phase. Fun, right??

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hi Predag

    Thanks so much for helping me with this. I'm afraid the site seems to be broken - take a look at the screenshots and you'll see what I mean. The home page looks great...but the rest of it...man, I nearly fainted! If you could help me fix this, I'd be very grateful.

    Emma

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    I apologize for keeping you waiting. We had some more questions than usually recently, hence the delay. That said, I took a look at your site and I can confirm that the site (except the homepage) doesn't look as it should.

    I tried to access your site's dashboard in order to review this directly but it seems that the support access that you granted has already expired. Could you please grant it again for me so I could take a closer look? In case WPMU DEV -> Support page was showing that the support access is still valid, please revoke it and then grant again.

    Let me know here when you're done with it, please!
    Best regards,
    Adam

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hi Adam

    Thanks very much for that. The WPmuDEV dash keeps disappearing from my WP dashboard. To keep it there I have to deactivate it, then reactivate it. I've granted support access too. Let me know when you're in and able to fix it!

    Best,

    Emma

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    Thanks for granting access.

    As for "disappearing WPMU DEV Dashboard" - I noticed that there are more than one "administrator" accounts on your site. By default the "WPMU DEV Dashboard" is visible for one administrator account - the one that was used to activate plugin. I'm guessing that it may be disappearing for you because it's being disabled/enabled via these other accounts. You may set it to be visible for all admins and hopefully this should solve the issue. To do this please go to your "WPMU DEV -> Manage" page and add additional admins using "Permissions" box there.

    As for Upfront layout. I checked your site and it seems that the issue here is SSL, not Upfront itself. I noticed that your dashboard is available over https:// connection. However on "Settings -> General" page both "WordPress Address (URL)" and "Site Address (URL)" options are set to start with "http://" prefix.

    As a result Upfront is not able to load some resources (e.g. CSS styles) that are available over https://. This is what's breaking the site. If you visit your main site typing its address into the browser bar manually, starting with "https://" prefix - layout "automatically fixes itself" and everything looks fine.

    That said, I suppose you have implemented SSL recently, is that right? Could you please shed some more light on how did you set it up? Are there any redirects added to ".htaccess" file or on a server level (e.g. via server's control panel)?

    Please advise!
    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    Thanks for this information! It seems that the SSL wasn't "fully" set up. I'd suggest giving following steps a try (all are fully reversible in case anything went wrong here):

    1. Go to your dashboard's "Settings -> General" page and update both "WordPress Address (URL)" and "Site Address (URL)" options to use URLs starting with "https://" instead of "http://"

    This should "force" WP to use proper http:// connection for your site (SSL secured).

    2. In case it didn't help fully, you may want to give this plugin a try:

    https://wordpress.org/plugins/ssl-insecure-content-fixer/

    3. You may need to get in touch with Bluehost and asked them for help with SSL configuration if none of the above helps.

    Please let me know of the result.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    I checked the site again and it seems that the issue is partially fixed now. The layout is working fine and Insecure Content Fixer solved the "blocked resources" problem that was causing the content to break. Still though the fact that site by default goes over "http" connection is breaking login feature. Accessing the site over https:// makes it work again.

    I think then it would be worth forcing the site to run over https by default. This could be done by adding following code to the site's ".htaccess" file:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(.*)$ https://www.hushhushvoiceovers.com/$1 [R,L]
    </IfModule>

    Add this code please at the very beginning of the ".htaccess" file content (do not remove anything that's already there). Hopefully this should force the site to run entirely over https:// connection and the login form should then work again.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    I reviewed your site once again. Layouts doesn't seem to be broken anymore, login works fine (I created a subscriber account for testing purpose, logged in, logged out and already removed that account) so I think we're good to go :slight_smile:

    In case you required any assistance not related to this thread, please post new ticket on our support forum.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    You're most welcome, I'm glad I could help you with this :slight_smile:

    As for optimizing/speeding up the site I'd recommend starting with these plugins:

    WP Smush Pro

    It's an image optimization tool that helps you optimize images, resulting in a "lighter" page which means fewer resources used and faster site loading

    https://premium.wpmudev.org/project/wp-smush-pro/

    WP Hummingbird

    It's an advanced "tuning/optimization" suite

    https://premium.wpmudev.org/project/wp-hummingbird/

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    It seems than we fixed some other important issues related to this and are now back to initial one :slight_smile: I'll be glad to assist you with this. I checked the site though and I've got a few questions before I start doing anything there:

    The menu's a mess

    I can see that it's "jumping" around the header depending on device resolution and that it's "not quite readable". Could you please suggest where it should "stick" in mobile mode and what colors should be used there (for background, links and "hover" - on mouse over - links)

    the footer's gone weird.

    It certainly looks different than in desktop view. Could you elaborate a bit on its desired layout?

    and one of my testimonial photographs appears to float at the bottom of the page

    I couldn't see this, there was no any testimonial photo at the bottom of the page for me. Could you share a screenshot with me?

    Knowing this all will help me help you :slight_smile:

    Best regards,
    Adam

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hi Adam
    Thanks so much for your help! Ideally - if the menu can't match the desktop view menu in mobile mode - I'd like the menu to sit underneath the logo as an easy to read vertical list, above the Sign Up button. The colour of the text should be black, with the rollover colour being hex colour #ad431c (this is our burnt orange colour you'll see all over the site) and the background on the drop-down for the Account item when a user is logged in is fine as a charcoal grey, text in white. If there are dividing lines between the drop-down menu items, it'd be great if the colour was #ad431c (again, the burnt orange). I hope that makes sense!

    As for the footer, if it can't match the layout in desktop mode, could we have vertical lists for the Keep it Hush Hush, Boring but important and Contact Form column elements of the footer?

    With all the menu and footer layouts if they can just look better and not as unwieldy and amateurish as they currently look in mobile mode, I'll feel a lot happier. At the moment, the mobile view looks like it's been put together by someone who doesn't care...and that will never do.

    You'll see that pictures and buttons have become displaced in other pages - again, if they could just sit in neat columns so they're easy to understand, I'll be happy.

    The floating testimonial pic is weird. Sometimes it's there and sometimes it's not. (It's always Laura Shavin's picture). Last time I checked it wasn't there...but it's as if the footer is occasionally being haunted by a huge picture of Laura... Maybe ironing out the css quirks will fix this occasional blip.

    I'm so grateful for your help with this. If you need any more info from me, just holler and I'll come back to you asap.

    e

  • Adam Czajczyk
    • Support Gorilla

    Hello Emma!

    Let me please first apologize for keeping you waiting!

    My colleague Predrag adjusted your site's menu for responsive views so it's now maching the "desktop" layout, I also changed sub-menu (drop-down menu) link color so it's white and "on hover" it get's "burnt orange". Let me know please if this is okay now.

    As for footer. I tried to adjust it also but it seems that I'm not quite sure what do you mean by making it "vertical lists" there. Do you mean a list like "bullet/numbered" list? Or some kind or "separators"? Please elaborate a bit on this. So far, I did however "ordered" footer widgets a bit so the their titles and order should match an order on desktop view.

    I still cannot however replicate that "floating testimonial" issue. Can you see this in "responsive mode" of Upfront editor or in resized browser (or its "responsive view" tool) or just on some physical mobile device? I'm asking this because it's possible that I may need to run some tests on physical devices to be able to replicate it.

    Please advise!
    Best regards,
    Adam

  • Emma Clarke
    • Site Builder, Child of Zeus

    Hey Adam

    Thanks so much for your help with this. One of your other colleagues has fixed the 'floating testimonials' issue - it was fixed just before you took a look.

    The footer is looking much better here - thanks very much. In the 'Boring but important' bit in the footer, is it possible to make the 3 items in that list appear as single spaced items...to match the 'Keep it Hush Hush' items? (This is only a small thing!)

    Do thank Pedrag for his help with this too.

    e

  • Adam Czajczyk
    • Support Gorilla

    Hey Emma!

    I'm glad we could help you with this. I've already passed your thanks to Predrag :slight_smile:

    Take a look at the footer please. I removed empty lines from between elements in "Boring but important" section. Is that fine now? Let me know :slight_smile:

    Have a nice day!
    Adam

  • Milan
    • WordPress Wizard

    Hello Emma Clarke

    Hope you are well today and won't mind me chiming here. :slight_smile:

    Now as this thread has reached to its destiny. ( means solved :smiley: ) I am marking this as resolved one and you do not need to reply us back here anymore. If in case issue comes up again, please reopen this thread. If you face any other issue in future please do open new thread if its off context.

    Thanks for being us. :slight_smile: Enjoy WPMU DEV.
    Cheers,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.