Create a fixed menu

tenkemakaveli24 · Member · Mar 31, 2017 at 6:41 am
Copy link

Add topic to favorites
Hi there,

I would like to create a fixed menu navigation when I scroll down the page and it keeps following, is it possible ?

It will be great if it appears in the foreground when I scroll down and not behind the pictures.

Furthermore, is it possible that the menu navigation begins to following the scroll at the exactly position that he is now ?

Thanks a lot for your answer =)

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Mar 31, 2017 at 8:13 am
Copy link
Hi there,
Your site seems to be in private mode so i cannot take a look at the menu bar and give you the exact code for it.

I will just give you an idea on how to achieve it. To make a menu bar fix on it position and follow the same position when scrolling you need to use this CSS property:
position: fixed;
And to keep this menu bar always in foreground make use of the z-index CSS property:
z-index: 9999;
make sure you keep the z-index to the highest possible so that it is always on the top of every element on the site.

Hope this helps a little :D
tenkemakaveli24 · Member · Mar 31, 2017 at 8:38 am
Copy link
Hi otpidusprime,

Thank you so much for your answer, I put my website online so you can check the menu bar for the exact code, because I tried to write what you told me but the result is not what I expected.. haaha.

I am a novice with the CSS code… Here is what I’ve written :

.main-navigation {
position: fixed;
z-index: 9999;
otpidusprime · Member · Mar 31, 2017 at 9:03 am
Copy link
Okay, i suppose this is what you are looking for: http://jsfiddle.net/7HHa5/2/
To do that you will need help of JavaScript with CSS.

So here’s the new CSS code for your menu bar:
```
#site-navigation {
    position: relative;
    left: 0;
    right: 0;
    background: #ffffff;
    z-index: 99999;
}
```
JavaScript(jQuery) for the header to be fixed after the scroll reaches the navigation:
```
window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("site-navigation");
    if (window.pageYOffset > 198) {
        header.style.position = "fixed";
        header.style.top = "0";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}
```
The only problem is that Javascript is not allowed in WordPress.com blogs for security reasons. As this is a multi-user blogging platform.

Maybe you can use WordPress.ORG which is a self-hosted blogging platform with greater customization possibilities.
tenkemakaveli24 · Member · Mar 31, 2017 at 10:47 am
Copy link
Thank you very much, despite the JavaScript problem, I’ve tried something else that looks great.

However, as you can see at the top of my site, if we are logged as WordPress member, there is the banner of the WordPress member that hide my nav bar.

Is there something to adapt it for the people who has this WordPress bar ? Because if you go as a simply guest, the nav bar is not hidden and is well adjusted.

Thank you very much for your help :)
otpidusprime · Member · Apr 1, 2017 at 6:17 am
Copy link
Good to know that everything works according to you :)

I don’t think there’s any solution to modify the WordPress bar. It is only visible to the people who are logged into their WordPress.COM accounts and visiting your site. And also, it’s not an entity of the theme that you can edit using the CSS editor. Sorry.
tenkemakaveli24 · Member · Apr 1, 2017 at 9:09 pm
Copy link
Hi otpidusprime,

It is possible, indeed I’ve tried this code and it works! =)

#wpadminbar {
display: none;
}
otpidusprime · Member · Apr 2, 2017 at 6:32 am
Copy link
Oh Awesome! :)
justjennifer · Member · Apr 28, 2017 at 8:42 am
Copy link
@tenkemakaveli24 even though it can be done, all sites on WordPressdotcom are required to display the ADMIN BAR.

See here under Frequently Asked Questions: https://en.support.wordpress.com/custom-css/

May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?
All WordPress.com users are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in).
justjennifer · Member · Apr 28, 2017 at 8:46 am
Copy link
@otpidusprime – please note the above.

Also, in this thread there was a spammer whose post I have now removed.

Should you come across a forum reply in a thread you are following or participating in that has little or nothing to do with the topic and includes a spam link (which this did), please TAG the thread with spammer, the username of the person who posted, and add the MODLOOK tag for Staff attention. Thanks again for your help.
gemmacevans · Member · Apr 28, 2017 at 9:12 am
Copy link
Hi tenkemakaveli24,

As justjennifer mentioned, you must not hide the Admin Bar. It is only visible to logged in users and provides links to important areas of your site and account.

Out of curiosity, why do you want to remove it?

Thanks!
otpidusprime · Member · Apr 28, 2017 at 9:45 am
Copy link
@justjennifer That reply was way at the beginning when i was just starting out in the forums. I had no idea about that back then.

I am aware about it now. Thanks for pointing it out tho. I have that in my mind now 🙂

Should you come across a forum reply in a thread you are following or participating in that has little or nothing to do with the topic and includes a spam link (which this did), please TAG the thread with spammer, the username of the person who posted, and add the MODLOOK tag for Staff attention. Thanks again for your help.

Sure, I will do this. 😇
justjennifer · Member · Apr 28, 2017 at 10:08 am
Copy link
Appreciated. :)

No items found.