WordPress.org

Forums

[resolved] [closed] Pinboard theme mobile menu positioning problem (20 posts)

  1. Ts2102
    Member
    Posted 2 years ago #

    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 :P

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    And the menu should be... where?

  3. Ts2102
    Member
    Posted 2 years ago #

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

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  5. Ts2102
    Member
    Posted 2 years ago #

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

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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;
     }
    
    }
  7. Ts2102
    Member
    Posted 2 years ago #

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

  8. gaffnere
    Member
    Posted 2 years ago #

    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!

  9. gaffnere
    Member
    Posted 2 years ago #

    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;
    }
  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Underneath this code;

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

    Try adding this;

    #access,
    #social-media-icons {
     position: relative;
    }
  11. gaffnere
    Member
    Posted 2 years ago #

    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!

  12. gaffnere
    Member
    Posted 2 years ago #

    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.

  13. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Add this to the same media query

    #access .nav-show {
     bottom: -38px;
    }
  14. gaffnere
    Member
    Posted 2 years ago #

    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!

  15. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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.

  16. gaffnere
    Member
    Posted 2 years ago #

    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.

  17. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    That's correct, just a little mistake here by me.
    Replace this;

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

    With this;

    #access .nav-show,
    #access a.nav-show:hover {
     bottom: -38px;
    }
  18. gaffnere
    Member
    Posted 2 years ago #

    you hero!

    thanks so much! it's perfect. amazing :)

  19. silviod
    Member
    Posted 2 years ago #

    hi, theme works correctly on traditional browsers (also reducing window size), but I still have a problem with the menu on mobile devices (I tried Android an I-phone): the "search" bar appear overlyng on the menu.
    Please check my website http:/www.laputa.it, I see the same problem on the demo site of the theme with my mobile device (http://demo.onedesigns.com/pinboard/)
    I inserted the code above in the style.css file of the child theme but it don't change anything.
    Can you help me please?
    thnks

  20. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    @silviod, either try the solutions in this thread or create your own thread.

Topic Closed

This topic has been closed to new replies.

About this Topic