Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Mobile menu icon displaced to right off screen

Solved by pamtbaau View solution

Started by Norma White 4 years ago · 3 replies · 354 views
4 years ago

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.

You can see the site at test.nhbpeterborough.com.

Thanks

4 years ago

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.

4 years ago Solution

@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.

CSS
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.
last edited 08/27/22 by pamtbaau
4 years ago

That works. Many thanks. I was being too myopic and looking for issues in the front matter of the home page and the hero page. Norma

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 51 8 hours ago
Support · by Anna, 2 days ago
2 58 10 hours ago
Support · by Justin Young, 11 hours ago
1 30 11 hours ago
Support · by Duc , 1 week ago
2 63 5 days ago
Support · by Colin Hume, 1 week ago
2 55 5 days ago