stop scrolling on header and main nav

This topic has 16 replies, 2 voices, and was last updated 8 years, 2 months ago by Mahesh.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
August 10, 2016 at 4:57 am #96950

Kim
Participant

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

August 10, 2016 at 1:03 pm #96984
Mahesh
Participant
@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
August 17, 2016 at 1:22 am #97365

Kim
Participant

Mahesh,

I put that code on my CSS but nothing changed.

K

August 17, 2016 at 9:50 am #97390
Mahesh
Participant
@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
August 23, 2016 at 2:04 am #97834

Kim
Participant

YAY! It worked!!! Thanks!

Kim

August 23, 2016 at 3:14 am #97837

Kim
Participant

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?

August 23, 2016 at 9:34 am #97846

Mahesh
Participant

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

Regards,
Mahesh

August 23, 2016 at 8:51 pm #97896

Kim
Participant

Tell me if this works.

August 23, 2016 at 9:29 pm #97897

Kim
Participant

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.

August 24, 2016 at 10:29 am #97933
Mahesh
Participant
@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
August 26, 2016 at 12:11 am #98095

Kim
Participant

When I do that I lose the Top Nav altogether.

Can I email you access to my site?

Kim

August 26, 2016 at 10:52 am #98139

Mahesh
Participant

@hidemyage: We’ll contact you through email.

Regards,
Mahesh

August 28, 2016 at 12:07 pm #98237
Mahesh
Participant
@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
August 29, 2016 at 2:45 am #98270

Kim
Participant

Same issue. I keep losing my main nav bar.

August 31, 2016 at 11:17 am #98425

Mahesh
Participant

@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

September 3, 2016 at 3:02 am #98654

Kim
Participant

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

September 5, 2016 at 2:32 pm #98774

Mahesh
Participant

@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