Support » Fixing WordPress » Pinboard theme mobile menu positioning problem

  • Resolved Ts2102

    (@ts2102)


    if you can see on my website when watch on mobile size

    http://nefertariappingedam.nl/

    the menu goes to the upper right corner and overlaps the logo and header text.

    Does some one know how to fix this ?

    the designers of the theme Pinboard dont give me feedback and other people have asked this multiple times on their forums. but dont get a answer back… SO PLEASE HELP ME im a neewb with wordpress 😛

Viewing 15 replies - 1 through 15 (of 19 total)
  • Moderator Andrew Nevins

    (@anevins)

    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.

    Moderator Andrew Nevins

    (@anevins)

    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?

    Moderator Andrew Nevins

    (@anevins)

    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;
    }
    Moderator Andrew Nevins

    (@anevins)

    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.

    Moderator Andrew Nevins

    (@anevins)

    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!

    Moderator Andrew Nevins

    (@anevins)

    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.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Pinboard theme mobile menu positioning problem’ is closed to new replies.