Button In Menu Won’t Hide on Mobile

  • webscape

    (@webscape)


    9 years ago

    Hello,

    I added a button to a menu, and when the site loads in smaller screens the button will appear in two places: outside the collapsable menu, and inside of it. I want to hide it and make it appear only inside. What am I overlooking? http://new.antonioguedes.com

    Thanks!

    • This topic was modified 9 years ago by webscape.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    9 years ago

    Hi there webspace!

    How are you creating that button??

    Odds are you could probably hide that using media queries. As an example you could do something like the following:

    
@media (max-width: 767px) {
  button {
    display: none;
  }
}

    Hope that helps

    Thread Starter webscape

    (@webscape)

    9 years ago

    Hey Jose,

    I literally went to the menu configuration and I created a custom link button with this code inside the Navigation Label: 

    
<iframe src=”https://embed.spotify.com/follow/1/?uri=spotify:artist:1a7mIcoRSomXVcnMZmJpHV&size=basic&theme=light&show-count=0″ width=”200″ height=”35″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; margin-bottom:-20px; margin-right: -120px;” allowtransparency=”true” ></iframe>

    I adjusted the margins to get it centered, bottom:-20px; margin-right: -120px;, and everything is working great. But it’s weird – at the least for me – it shows in two different places, inside the mobile menu, and outside.

    Thank you for your help!

    • This reply was modified 9 years ago by Jose Castaneda. Reason: code formatting
    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    9 years ago

    Yeah. It appears to create two iframes.

    Does this happen with any other theme? Are you able to test that?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Button In Menu Won’t Hide on Mobile’ is closed to new replies.