Move menu location when template doesn't allow for it

• 

  kaylarperry · Member · May 31, 2016 at 2:25 pm

  • Copy link
  • Add topic to favorites

  Hi there, I’d like to move the location of my social links menu, from the bottom of the page to the top, if at all possible. Can I do this via CSS?

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

• 

  kaylarperry · Member · May 31, 2016 at 2:32 pm

  • Copy link

  Just a follow up – the template doesn’t allow for this automatically

• 

  kaylarperry · Member · May 31, 2016 at 2:34 pm

  • Copy link

  And I’d like it to be underneath the main menu. I found this CSS code (below) which is helpful but places the social menu above the main menu. Thanks!

  @media (min-width: 768px) {
  .site {
  margin-top: 50px;
  }

  .social-navigation {
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  }

  .admin-bar .social-navigation {
  top: 32px;
  }
  }

• 

  siobhyb · Member · Jun 1, 2016 at 5:31 pm

  • Copy link

  Hi @kaylarperry,

  You could use the following CSS to bring the social menu just below your site’s main menu:

  @media (min-width: 768px) {
  .social-navigation {
      border-top: 0;
      position: absolute;
      top: 30px;
      left: 0;
      text-align: center;
      width: 100%;
  }
  }

  You can increase/decrease the value of top and left in the above snippet to further experiment with the positioning of the menu.

  Let me know how that goes or if you’d like any further guidance.

• 

  kaylarperry · Member · Jun 2, 2016 at 10:48 pm

  • Copy link

  Hi @siobhyb, it moved the location, but now the menu is inactive – I can’t click on any of the icons.

• 

  siobhyb · Member · Jun 3, 2016 at 11:08 am

  • Copy link

  Hi there,

  Apologies for not spotting that in my testing! Adding a high z-index should resolve the issue.

  Can you please try:

  @media (min-width: 768px) {
  .social-navigation {
      border-top: 0;
      position: absolute;
      top: 30px;
      left: 0;
      text-align: center;
      width: 100%;
      z-index: 9999;
  }
  }

  Thanks!

• 

  kaylarperry · Member · Jun 3, 2016 at 12:39 pm

  • Copy link

  Got it! Thanks :)

• 

  siobhyb · Member · Jun 3, 2016 at 3:34 pm

  • Copy link

  Perfect! Let us know if any extra questions come up.