[catwingz]

Hi, I am building an external non-WordPress page to link with https://hotelprairie.com

It recreates the look & feel of the parent website and I am trying to emulate the transition to the mobile hamburger menu. I see quite a few media queries in the CSS, but I haven’t been able to locate the code addressing the swap between the horizontal and mobile menus. Please point me in the right direction.

thank you

[minal]

Hello @catwingz:

To emulate the desired transition, it will be challenging to replicate the same code from the theme for mobile menus and hamburger because it might have a separate HTML structure, JS, and CSS from your site.

Sincerely,

Minal

[catwingz]

@minal I am aware of this, and it does indeed have a different structure. However I would still like to be able to see the media queries for this theme as they relate to swapping between the two forms of navigation. I am trying to make this page mirror its WordPress parent as closely as possible and without that information I will never know if it will help me or not.

[minal]

Hello @catwingz:

In this theme, we have used two navigation HTML structures for desktop and mobile, allowing for mobile screen menu effects.

For the mobile screen, we have shown the mobile navigation having class name “mobile-menu” and a hamburger icon, and hidden the nav on desktop. We have a class ‘sidr’ for the mobile menu,

You can search “mobile-menu” and “sidr” in your style.css file.
For a quick example, we have a style for a mobile menu like below.

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 260px;
  overflow-x: none;
  overflow-y: auto;
  font-size: 15px;
  background: #333;
  color: #fff;
  -webkit-box-shadow: inset 0 0 5px 5px #404040;
  -moz-box-shadow: inset 0 0 5px 5px #404040;
  box-shadow: inset 0 0 5px 5px #404040;
}

.sidr.left {
  left: -260px;
  right: auto;
}

And with the help of JS sidr is shown when hamburger icon is clicked.

If possible, could you share your site URL? So that I can give you a clearer view.

Please let me know if this worked. Thank you.

Sincerely,
Minal

[catwingz]

@minal, the website is https://hotelprairie.com

but it might be another week or so before the page is live on the site. I can let you know when I put it up.

Thank you for your help.

[Author]

Posts