Header/Menu orientation on all pages except landing page

Sydney Pro
#1

I recently purchased the “Sydney Pro” theme and I’m having the following technical issue(s) that I require some assistance with please.

Please note that the issues I am about to detail were not evident during website construction/editing and are only being expressed on the live version, when I am logged out of WordPress and my WordPress dashboard.

The “Sydney Pro” header/menu on the landing page are represented correctly and function fully.

Please note: This is also the case for smartphone, tablets, and any other desktop computer used during this website live test.

However, when I view any of the other pages of the website on the desktop, the layout of the menu/header is not correct. You will note the menu /header area is now two tone in colouration and a white gap has appeared between it and the image/content beneath.

Also, when I open any of the pages on a tablet or smart phone device, other than the landing page, the following errors occur.

With the device ( tablet/smartphone ) in portrait mode the page(s) appears normal, with the exception of a white gap between the image and header/menu

After I rotate the device into landscape mode the content all appears normal and the white gap disappears.

After I refresh the page on the said device, the header/menu appearance changes.
The layout of the menu/header is not correct. You will note the menu /header area is now two tone in colouration and a white gap has appeared between it and the image/content beneath.

After I rotate the device back into portrait mode the menu/header section has a white gap to the right side and between the image below.

I feel that there may be an issue with the theme header/menu page integration and would appreciate your thoughts and advice moving forward.

Please be aware that all the content aside from the header is being displayed correctly and is fully responsive.

I look forward to hearing from you in the near future and thank you in advance.

“Thank Britain”
[https://thankbritain.org.uk/]

#2

Hi,

I am sorry to hear that you have run into issues. I am happy to help out.

Can you share some screenshots that directly point the issue and share the related links?

It would be better if you can add some annotations to your screenshots. So I can quickly get the problem and find the solution.

Regards,
Kharis
aThemes Support

#3

Hi Kharis,

Thank you for your message.

Screenshots
Screenshots2400×1799 617 KB

Please refer to the attached images that relate to the description in my earlier message.

I look forward to hearing your thoughts please and thank you once again.

Warm Wishes

Matthew E Davison

#4

Hi Matthew,

Thank you for sharing the screenshots.

Can you let me know which web browsers you are using? Are they the latest versions?

Adding, it is always better to have the latest versions to get the most ouf the theme’s layout and features.

Regards,
Kharis
aThemes Support

#5

Hi Kharis,

Thank you for your swift response and really helpful questions, with respect to potential browser issues.

This was in our mind also, so we tried viewing the website, via several different browsers and remote devices, with the same net result. So we have been able to completely rule out any correlation there.

I am confident that should you view the website at your end you will experience the same menu/header layout issues, as detail within my previous email to you.

I suspect there is an issue(s) with the theme and the way it represented the menu/header on the pages and await your further advice moving forward please.

Many Thanks.

Matthew E Davison

#6

Hi Matthew,

Can you let me know the resolution of your device?

Mewnwhile, please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard; and let me know whether it helps or not.

    .header-contact,
    #masthead.site-header {
      width: 100vw;
      min-width: 100vw;
    }

    @media only screen and (min-width: 1025px) {
      .no-hero #masthead.site-header.fixed {
        top: 55px !important;
      }
      .no-hero #masthead.site-header.fixed.float-header {
        top: 0 !important;
      }
    }

Regards,
Kharis
aThemes Support

#7

Hi Kharis,

Thank you so much for the code, which has fixed the main issue with the header and menu layout on all responsive modes.

However, I wonder if may perhaps trouble you a little further please, as I am still having the issue with the white area to the top right of the menu/header, when I rotate the tablet from landscape back to portrait on smartphone or tablet devices. ( please see attached image )

Please disregard the white area beneath, as I have yet to adjust the image position beneath the menu/header area, hence the gap.

I’d really appreciate your thoughts and continued assistance with this final matter please.

Thank you so much in advance in helping me get one step closer with this very worthwhile new charity, designed to thank all our key workers across Great Britain!

Warm Wishes

Matt :slight_smile:

Page - Tablet View - Rotate Device - Portrait - Step 4
Page - Tablet View - Rotate Device - Portrait - Step 41200×1057 228 KB

#8

Hi,

Try adding the below CSS code into Additional CSS of your website.

    html, body {
      min-width: 100vh;
    }

Regards,
Kharis
aThemes Support

#9

Hi Kharis,

Thanks for the code which unfortunately didn’t prove a fix.

Furthermore, when I added it to the CSS editor, parts of the script were being highlighted in red, which I am guessing isn’t a good start.

I have highlighted the areas in bold, if that helps?

html, body {
min-width: 100vh;
}

The net result of using the code, was an extension to the white area, which now continued vertically down to the bottom of the page, until I scrolled downwards, then the page would suddenly fully fill the screen and the white area disappear, from header to footer.

Please note that this would only happen when I scrolled down the page and if I did nothing the white area would remain present.

I have since removed the this latest piece of script and await your further input please.

Warm Wishes

Matthew Davison

#10

Hi Matthew,

Sorry for the incorrect code. Please replace it with

    html, body {
       min-width: 100vw;
    }

Then clear cache and run your test. Let me know how it goes.

Regards,
Kharis
aThemes Support

#11

Hi Kharis,

Thank you for the code revision, but still the same results I’m afraid.

Warm Wishes
Matthew