- This topic has 16 replies, 2 voices, and was last updated 7 years, 8 months ago by Mahesh.
-
AuthorPosts
-
August 10, 2016 at 4:57 am #96950KimParticipant
How can I stop my header and navigation menu from scrolling? I would like them visible even when I scroll through my posts.
Thanks!
August 10, 2016 at 1:03 pm #96984MaheshKeymaster@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,
MaheshAugust 17, 2016 at 1:22 am #97365KimParticipantMahesh,
I put that code on my CSS but nothing changed.
K
August 17, 2016 at 9:50 am #97390MaheshKeymaster@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,
MaheshAugust 23, 2016 at 2:04 am #97834KimParticipantYAY! It worked!!! Thanks!
Kim
August 23, 2016 at 3:14 am #97837KimParticipantOne 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 #97846MaheshKeymaster@hidemyage: Can you please post the image link, the link seems to be broken.
Regards,
MaheshAugust 23, 2016 at 8:51 pm #97896KimParticipantTell me if this works.
August 23, 2016 at 9:29 pm #97897KimParticipantYikes! 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 #97933MaheshKeymaster@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,
MaheshAugust 26, 2016 at 12:11 am #98095KimParticipantWhen 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 #98139MaheshKeymaster@hidemyage: We’ll contact you through email.
Regards,
MaheshAugust 28, 2016 at 12:07 pm #98237MaheshKeymaster@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,
MaheshAugust 29, 2016 at 2:45 am #98270KimParticipantSame issue. I keep losing my main nav bar.
August 31, 2016 at 11:17 am #98425MaheshKeymaster@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,
MaheshSeptember 3, 2016 at 3:02 am #98654KimParticipantHmmmm. I’m not sure what your seeing but I see it doing the same thing.
September 5, 2016 at 2:32 pm #98774MaheshKeymaster@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 -
AuthorPosts
- The topic ‘stop scrolling on header and main nav’ is closed to new replies.