Pinboard theme mobile menu positioning problem

And the menu should be… where?

I was hoping that it would be possibel to center the menu beneath the facebook button. And just above the cointainer.

Do you have a section in the dashboard named, “Custom CSS”, “Custom Styles”, or “Jetpack”, or are you using a Child Theme?

Jes I can place some custom html and css with this theme in the layout section. Is that what you meant?

As long as you’re not editing the theme’s files, enter this CSS;

@media screen and (max-width: 480px) {

 #header {
  position: relative;
  padding-bottom: 30px;
 }

 #access {
  background: none;
 }

 #access,
 #access .nav-show,
 #access a.nav-show:hover {
  bottom: 0;
 }

 #access .nav-show,
 #access a.nav-show:hover {
  top: initial;
  left: 44%;
 }

 #access:target .menu {
  margin-top: 0;
 }

}

@andrew Nevins Great man Tank you very mutch it worked !

hi guys,
same issue…
i tried your solution andrew & the nav did move for me. but now the 3 social media icons aren’t working. (they worked fine when the nav was in the original place.)
site is: willfredd.roisingaffney.com
any ideas? i don’t particularly mind where the nav box is positioned, i just don’t want it overlapping the site’s logo.
thanks!

hi again,
i should probably add that i am also using the following custom css to move the search bar on the mobile site as it was overlapping with the nav menu… although i don’t think it’s affecting this issue at all.

#header input#s {
    z-index: auto;
}

.flex-direction-nav, .flex-pauseplay {
    z-index: auto;
}

Underneath this code;

#access:target .menu {
  margin-top: 0;
 }

Try adding this;

#access,
#social-media-icons {
 position: relative;
}

thank you so much for your response, andrew! wish i understood all of this a little more..

so i tried what you suggested & am pleased to report the icons now work. however, the nav is overlapping the twitter (middle) icon a bit. is there any way i could lower it a bit to remove the overlap & maybe slightly centre it better (width-ways).

willfredd.roisingaffney.com

forever grateful!

oh just noticed as well –
now when you click into the nav, the nav box overlaps with the “contact” link & brings you straight to the contact page, even though you haven’t clicked on it.

Add this to the same media query

#access .nav-show {
 bottom: -38px;
}

seriously, thank you so much for your help, andrew. really appreciate it.

so i added your latest code to my custom css & left in

#access {
  background: none;
 }

what happens now:
on the initial load, the nav box is positioned great with no overlapping. but when you click on it, the nav box jumps to it’s previous position overlapping the twitter icon. when you click again, it takes you straight to the contact pg. although it doesn’t overlap with the “contact” part of nav anymore.

no worries if we can’t solve it. i can always revert to how it was in the start. frustrating that we’re getting so close tho!

I regretted that recommendation and removed it because it only caused more problems, please see my recent comment “Add this to the same media query” instead.

ok to be honest, little bit of confusion. i wasn’t sure where you wanted me to add that code. think it’s in the order you meant now. complete code below.

#header {
  position: relative;
  padding-bottom: 30px;
 }

 #access {
  background: none;
 }

 #access,
 #access .nav-show,
 #access a.nav-show:hover {
  bottom: 0;
 }

 #access .nav-show,
 #access a.nav-show:hover {
  top: initial;
  left: 44%;
 }

 #access:target .menu {
  margin-top: 0;
 }

#access,
#social-media-icons {
 position: relative;
}

#access .nav-show {
 bottom: -38px;
}

}

nav box still doing little jump when you click it, & then overlaps with “contact” link. otherwise it’s all working fine.

thank you again.