Our site has been running for several years, but recently a reader reported that there was no menu icon displayed. Turns out that on a phone it is shifted off to the right by a full phone width, on a tablet by a lesser amount.
My theme PNHBtheme is based on Quark and was originally put in place by Paul Hibbit.
This displacement happens only on the main page, which is modular and includes a hero page. The issue does not appear to have been caused by any new pages and I cannot find anything wrong with the home page or the .html.
Any suggestions as to where to look? I am out of ideas.
Get rid of position: fixed; on .header-fixed .mobile-menu {}, .header-fixed #header {}, and .mobile-menu .button_container.active and they align as expected. You also want to test the widths thereafter, emulated via the browser’s dev tools.
@normawhite, Since Quark is working fine using position: fixed on several elements, I suspected the issue must be somewhere else.
Because you already found out that “[it] Turns out that on a phone it is shifted off to the right”, I suspect there is some content that pushes the width of the page.
Searching the content, it appears that the <iframe> containing the calendar has a width="800", which pushes the envelope.
The following css rule will force the iframe to take 100% of its container instead of extending it to 800px. The menu button will be visible again.
iframe {
width: 100%;
}
Note:
In case you make use of more <iframe>s, you might want to add a proper id to the element and css rule.
You may notice that the <iframe> now also takes the full container size on larger screens.