[Kim]

How can I stop my header and navigation menu from scrolling? I would like them visible even when I scroll through my posts.

Thanks!

Kim
https://beautyblackbook.com

[Mahesh]

@hidemyage: Go to Dashbaord=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

@media screen and (min-width: 941px) {
    #branding {
        position: fixed;
        z-index: 10;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    #header-menu {
	position: fixed;
	z-index: 5;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
    #main-wrapper {
        margin-top: 57px;
    }
}

Regards,
Mahesh

[Kim]

Mahesh,

I put that code on my CSS but nothing changed.

K

[Mahesh]

@hidemyage: Have you changed your site’s design, it looks a bit different that what it looked before. May be the image wasn’t displaying before. Any way, please use the following CSS instead.

@media screen and (min-width: 941px) {
    #branding {
        position: fixed;
        z-index: 10;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    #header-menu {
	position: fixed;
	z-index: 5;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 161px
    }
    #main-wrapper {
        margin-top: 217px;
    }
}

Let me know further.

Regards,
Mahesh

[Kim]

YAY! It worked!!! Thanks!

Kim

[Kim]

One thing though. I just noticed that my background color cuts off on either side of my logo. Take a look:

How can I fix that?

[Mahesh]

@hidemyage: Can you please post the image link, the link seems to be broken.

Regards,
Mahesh

[Kim]

Tell me if this works.

[Kim]

Yikes! Also, I just noticed that when you click on a page or a post the main nav bar menu disappears. I’m going to take it off for the time being so you won’t see it on my live site.

[Mahesh]

@hidemyage: Okay I see the background issue, please add the following CSS it will fix the issue.

#branding, 
#header-menu {
    max-width: 1300px;
}

I don’t see the other issue of menu disappearing. Let me know further.

Regards,
Mahesh

[Kim]

When I do that I lose the Top Nav altogether.

Can I email you access to my site?

Kim

[Mahesh]

@hidemyage: We’ll contact you through email.

Regards,
Mahesh

[Mahesh]

@hidemyage: Please remove all CSS I’ve provided before just to avoid confusion. Then add the following CSS:

@media screen and (min-width: 941px) {
    #branding {
        position: fixed;
        z-index: 10;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    #header-menu {
	   position: fixed;
	   z-index: 5;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}

#branding, 
#header-menu {
    max-width: 1300px;
}

@media screen and (min-width: 941px) and (max-width: 1000px) {
    #header-menu {
        top: 128px;
    }
    #main-wrapper {
    margin-top: 142px;
}
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
    #header-menu {
        top: 161px;
    }
    #main-wrapper {
    margin-top: 185px;
}
}

@media screen and (min-width: 1101px) and (max-width: 1152px) {
    #header-menu {
        top: 172px;
    }
    #main-wrapper {
    margin-top: 196px;
}
}

@media screen and (min-width: 1153px) and (max-width: 1280px) {
    #header-menu {
        top: 180px;
    }
   #main-wrapper {
        margin-top: 204px;
    }
}

@media screen and (min-width: 1281px) {
    #header-menu {
        top: 195px;
    }
   #main-wrapper {
        margin-top: 217px;
    }
}

Regards,
Mahesh

[Kim]

Same issue. I keep losing my main nav bar.

[Mahesh]

@hidemyage: I have modified some CSS and tested in the live site. I have kept the Custom CSS there so that you can check. Should work fine now.
Let me know further.

Regards,
Mahesh

[Kim]

Hmmmm. I’m not sure what your seeing but I see it doing the same thing.

[Mahesh]

@hidemyage: Have you made any changes in the Custom CSS afterwards? Not in the one I’ve provided but others that are already there. Its kinda strange that the code worked fine before, now its all messed up again. Since the CSS for this depends on width of the device, media queries needs to be used. I recommend you to hire a customizer for this.

Regards,
Mahesh

[Author]

Posts