Top header menu visibility problems others

  • Resolved babyninja

    (@babyninja)


    8 years, 9 months ago

    Hi, first post be gentle ?? I’ve just created this website https://www.babyworldandme.co.uk/ and despite tinkering and searching can’t resolve the following problems:

    1) When viewing on my mobile (5 inch) screen there is no visible navigation on the header. Although when I tap underneath the logo a drop down menu appears. I’ve tried changing the menu background colours but it makes no difference.

    2) When viewing on a 9.7 inch tablet the menu navigation does appear on the top right corner as three small white horizontal bars however the top header background is now black (reverts to the chosen white header background when scrolling down). However I don’t want it black.

    Ideally I’d just be able to see the three small horizontal navigation bars in black against a white background.

    3) Lastly when running page insights I get this message “Above The Fold Optimization”. I’m running Above The Fold Optimization & W3 Total Cache but this still comes up.

    4) Lastly any feedback on my site in terms of optimizations would be welcome ??

    I have really limited experience with wordpress so nothing too technical please in the feedback!! Many, many thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • 1. Your button for your mobile menu is set to white(#fff) so, it’s there, you just can’t see it over the white background. Add the following CSS to your custom CSS or your child theme’s ‘style.css‘ file.

    .btn-menu {
    color: #000;
}

    be sure to change the color to something you like.

    2. There is a specific media query set up in your CSS that changes your nav header to an opaque black at 1024px. I personally would recommend setting the background color to transparent during this size given that your slider images are full size. Any color there aside from transparent would take away from your beautiful imagery. Again use CSS to accomplish this.

    @media only screen and (max-width: 1024px) {
    .site-header {
        background-color: transparent;
    }
}

    3. As far as optimizing for speed, that’s not an easy one to help with as each and every site is different. I can say that just by simply installing a plugin doesn’t guarantee a result. There would still be a lot of hands on coding and testing to get those insight numbers where you want them. If you’re a novice I would suggest reaching out to YouTube and seeing how others solved that issue.

    Thread Starter babyninja

    (@babyninja)

    Mr Case thank you so much for kindly responding and helping me to fix those two issues. Works great now ??

    I’ve optimized all my pictures so they are much smaller but still look great which has helped load times.

    My next task is to sort out a booking/payment system so I can track bookkings against places. Any recommendations? I’ve looked at woocommerce, again, just need something a novice can handle!

    I’m afraid I will be of no help in terms of any form of e-commerce solutions. I do wish you luck on your quest however!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Top header menu visibility problems others’ is closed to new replies.