Problem with Top/Horizontal menu bar with header image

  • Resolved stomponstep1

    (@stomponstep1)


    10 years, 5 months ago

    My website is StompOnStep1.com. I am having a problem with the header image. The top/horizontal menu bar “jumps” when I start scrolling. At first it is below the header image but when I start to scroll down the menu bar jumps upward and ends up in the middle of the header image. This problems seems to occur when I use chrome browser, but not with internet explorer. I like that the menu bar is able to be read even when you scroll down to the bottom of the page, but having the menu bar end up onto of my header image is not going to work.

    The header image I included is larger than the one suggested, but I tried cropping my picture to the suggested size and the same thing happened so I don’t think that is the problem.

    I apologize if this has already been asked. I tried searching but couldn’t find anything. But please point me in the right direction if this has already been addressed. I haven’t created a child theme yet, but that is on my to do list today in case this fix requires CSS changes

    Thanks!

Viewing 15 replies - 1 through 15 (of 19 total)
  • Thread Starter stomponstep1

    (@stomponstep1)

    Just finished creating the child theme so I am ready to dig into the CSS if needed. Just need some direction on how would be best to tackle this problem. Ideally I would like to have it so the menu scrolls along like normal and is always visible, but never goes above/on top of the header picture. If that change would be too difficult I would be fine with just “freezing” the menu bar so that it doesn’t move at all when I scroll

    Thread Starter stomponstep1

    (@stomponstep1)

    Anyone have any ideas? Is there any way to fix the primary menu in place so it doesn’t move as you scroll?

    Did you fix this? I’m visiting your website in Chrome (for Windows) and it seems to be working fine.

    Thread Starter stomponstep1

    (@stomponstep1)

    I haven’t addressed the problem in anyway. That is interesting that you can’t see it. I’m using chrome for windows and I still see the menu bar cover up the header image once I start scrolling down. I don’t see the issue when I use internet explorer so I’m not sure what is going on.

    Thread Starter stomponstep1

    (@stomponstep1)

    Here is a link to the screenshot of the problem I am currently seeing

    https://www.stomponstep1.com/wp-content/uploads/2014/06/menu-problem.png

    So… this is kind of weird. At first I thought it might be a caching issue, but when I tried to reload your site without the cache (shift-f5) I started seeing the problem as well. It seems to be an intermittent issue as sometimes if I reload without cache it works fine, sometimes it doesn’t. I’m afraid the best I can suggest right now would be to try and narrow down the source of the problem. If possible disable your plugins one at a time to see if that solves things, It could be going back to standard twenty fouteen as well to see if the problem happens there too.

    Thread Starter stomponstep1

    (@stomponstep1)

    Thanks so much for the suggestions. These are very good ideas to get started with.

    Thread Starter stomponstep1

    (@stomponstep1)

    I deactivated all of my plugins and went back to the stock twenty fourteen theme and I still have this problem. I’m not sure what to do now

    Thread Starter stomponstep1

    (@stomponstep1)

    Whenever I load the page using Shift F5 as Chris suggested above the problem cannot be reproduced. When I just click around to different links or use the refresh button I see the issue sporadically about half of the time. I’m pretty new to web design so I’m not sure what that points to, but I’m hoping somebody out there might be able to interpret that and point me in a new direction

    Thanks in advance!

    I see you’re using W3Total Cache, do you know if it is set to minify anything at all as I have heard of this causing similar problems that don’t always go away immediately when switched off?

    It might not be ideal, but plan b could be to stop the menu from being fixed at the top of your window at all so it just scrolls with everything else.

    Thread Starter stomponstep1

    (@stomponstep1)

    Thank you so much!

    I hadn’t changed any of the W3 Cache plugin settings after installing it. Based on your suggestion I found a bunch of articles and videos discussing how the plugin can be properly configured

    I mainly followed this video https://www.youtube.com/watch?v=psoQQYGEqi4 to configure the settings and then cleared the minify cache. Now I can’t reproduce the problem so it looks like it is fixed

    Thread Starter stomponstep1

    (@stomponstep1)

    marking this forum as resolved

    I think the problem comes when you add an image at the top of the screen. I saw it on your site and now I see it on mine. It’s not a cache issue. The menu changes position?

    It’s possible you’re experiencing a slightly different issue as this one has already been resolved as mentioned above. If you’re having an issue with your site post a new thread with more details. I’m on my mobile right now, but I’ll check if you have later and do what i can to help.

    Thread Starter stomponstep1

    (@stomponstep1)

    The problem can only arise when you have a header image (otherwise the menu would not have anything to “jump” on top of). But as soon as I corrected the cache issue like Chrisdc1 suggested the issue went away. I haven’t been able to recreate the issue since then. If you are having the same issue as me I suggest following the setting suggested in the above link. If that doesn’t work you may be dealing with a different problem.

    Good luck

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Problem with Top/Horizontal menu bar with header image’ is closed to new replies.