Moving menu onto featured image

• 

  abizadeh · Member · Aug 17, 2016 at 8:01 pm

  • Copy link
  • Add topic to favorites

  I am using the “Stay” theme on a premium plan, and am looking to modify my home page. Currently, my primary menu is above the featured photo. I would like the primary menu to be on top of the top of the image so the image is behind the menu. Is there a way I can do this? The header option doesn’t work, as the primary menu moves below the image. And the image as the background is not what I am looking for.

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Aug 17, 2016 at 10:05 pm

  • Copy link

  Your site is set to private so I can’t test directly but based on the Stay demo site this is what I’ve come up with.

  It’s set to only affect screen sizes larger than a tablet held portrait because otherwise your menu breaks to multiple lines and it looks a bit messy. There’s also a different menu button that appears for smartphones and I didn’t want to mess with that.

  I’ve also made the background semi-transparent white so you can still read the text pretty easily. Let me know what you think:

  @media screen and (min-width:769px) {
    body.home .navigation-main {
      position: relative;
      top: 35px;
      z-index: 30;
      background: rgba(255,255,255,0.6);
      margin-bottom: 0;
    }
  }

• 

  abizadeh · Member · Aug 17, 2016 at 11:22 pm

  • Copy link

  Thats perfect! Thank you!