Custom code affecting the visibility of navbar menu on mobile

Design help Custom code
1

Hi all -

I’m building a personal portfolio and on my home page, I decided to include a custom code embed for styling a text sentence purposes.

For some unknown reason (and I think this has to do with the custom code on the homepage because on other pages it’s all okay), the hamburger menu (i.e., the three lines for nav bar) is not visible on a mobile device view. It’s tricky because it seems to work on the mobile viewport view on Webflow itself, but when I actually open the page using my phone to view it, that’s when the problem occurs.

Image of screenshot taken on my iphone:

IMG_6904
IMG_69041170×2532 157 KB

IMG_6903
IMG_69031170×2532 230 KB

I’d love to get some help on this issue if anyone has faced something similar or has some knowledge in html/css custom code on webflow. Thanks a bunch!

Here is my site Read-Only:
https://preview.webflow.com/preview/jae-kims-design-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=jae-kims-design-portfolio&preview=02ecbee5af895a5159bbd74ded4cb65e&workflow=preview

And custom code I have on the homepage:

<div class="wrapper">
      <p>and I bring 5 years of</p>
      <div class="words">
        <span>Strategy Consulting</span>
        <span>Customer Experience (CX)</span>
        <span>Cross-functional Team</span>
        <span>Digital Transformation</span>
        <span>Strategy Consulting</span>
      </div>
      <p>experience to design</p>
    </div>

<style>
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.wrapper {
  box-sizing: content-box;
  background-color: #ffffff;
  height: 40px;
  display: flex;
}
.words {
  overflow: hidden;
}
span {
  display: block;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  color: rgba(39, 171, 229, 1);
  animation: spin_words 6s infinite;
  font-weight: 600;
  text-align: center;
}
@keyframes spin_words {
  10% {
    transform: translateY(-106%);
  }
  25% {
    transform: translateY(-100%);
  }
  35% {
    transform: translateY(-206%);
  }
  50% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(-306%);
  }
  75% {
    transform: translateY(-300%);
  }
  85% {
    transform: translateY(-406%);
  }
  100% {
    transform: translateY(-400%);
  }
}

</style>
2

Disable this and it should work.

1 Like
3

@Stan - works like a charm!! Thank you very much for the quick help, really appreciate it:)

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.