Help with Sticky Nav Bar

So I have installed the sticky nav bar from this tutorial:

https://help.forumotion.com/t143777-make-your-navbar-sticky?highlight=sticky

The problem is I don't want to use my default buttons from my Sticky Navigation bar. I want instead to use the words, Home, Portal, Calendar, Memberlist, Usergroups, Search, FAQ and log out, log in and Register instead. I understand in the tutorial how to add these words but I don't understand how to make these words links so that they work and take you to where they suggest when you click on them.

I would appreciate any help, thanks

Here is a link to a topic open to guests to show an example of the sticky nav bar I want:

If you create a customized navbar link in the AP, it should be added since it is part of the default navbar.

SLGray wrote:If you create a customized navbar link in the AP, it should be added since it is part of the default navbar.

I wanted to leave the buttons that are in the fixed navbar, and create just the words to go in the sticky navbar. The tutorial says to set the default navbar in the JS to false and then add what you want in the sticky navbar into the JS, but I don't understand how to make them work as links. So that the word 'Home' in the sticky navbar for instance would take you to the homepage.

I have added a couple of my navbar buttons to my test forum. To show how I want my fixed navbar to look, while using words in the sticky. I am sorry if I am not explaining it very well, or am missing something. Is it possible for the sticky to be different to the fixed navbar and be functional ?

Thanks

hello

so you want the custom fixed navbar to have your buttons and the sticky navbar to have different buttons?

skouliki wrote:hello

so you want the custom fixed navbar to have your buttons and the sticky navbar to have different buttons?

Yes @skouliki

Is it possible?

The main reason I want them to be different is that when I use my current buttons in the sticky navbar it creates a wide excess of black bar under the sticky navbar. Making it lower than it higher than it needs to be. I don't know why it does this, but when I just use words the sticky bar is the correct height with no excess underneath.

I have changed the js setting to true for default navbar so you can see how it looks.

I tried this from the tutorial and changed the words from top and bottom to Home, Portal etc. It does make them appear in the sticky navbar while my default  buttons don't change in the  fixed navbar, but they are not usable links.

Code:

customNav : '<a class="mainmenu" href="#top">Top</a><a class="mainmenu" href="#bottom">Bottom</a>',

Thanks

Hello

The main reason I want them to be different is that when I use my current buttons in the sticky navbar it creates a wide excess of black bar under the sticky navbar.

If that problem would be solved, would you still need them to be different? That's what bothers you? The extra space that it creates?
Can you give us your forum link please? Thank you

The main reason I want them to be different is that when I use my current buttons in the sticky navbar it creates a wide excess of black bar under the sticky navbar. Making it lower than it higher than it needs to be. I don't know why it does this, but when I just use words the sticky bar is the correct height with no excess underneath.

can you enable the sticky navbar to check it please

It is already activated:  https://games-tester.forumotion.com/

levy wrote:Hello

The main reason I want them to be different is that when I use my current buttons in the sticky navbar it creates a wide excess of black bar under the sticky navbar.

If that problem would be solved, would you still need them to be different? That's what bothers you? The extra space that it creates?
Can you give us your forum link please? Thank you

Yes if that was solved I would not need them to be different .The extra space it creates does not look nice.

If you use my hidden link (called 'Test topic') @skouliki & @levy in the first post. It will take you to a page that is long enough to scroll down to see the sticky navbar

Edited to Add. I did try this on my main forum and the results are the same as the test forum. If anything maybe the excess black bar in the sticky is even bigger on my main forum than the test forum when using my fixed navbar buttons. The issue appears to be my default Navbar buttons themselves

I did try to make the buttons smaller but it did not help. My current Navbar buttons are 88 x 33px, I tried them at 77 x 27px  and it did not change the result so I have put the 88 x33 px back.

Hello,

Search on your CSS the following code, you just have to edit the height from there. I tried it with 10px or you can even remove it to be standard.

Code:

#fa_sticky_nav a.mainmenu {
    color: #CCC;
    font-size: 12px;
    font-weight: bold;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    background: url(https://i.servimg.com/u/f21/18/21/41/30/row10.gif) repeat-x 0px 30px;
    display: inline-block;
    padding: 0 10px;
    height: 0px;
    line-height: 0;
    transition: 200ms;
}

In the code it is set to 0 but play with it as you wish. Let me know if you need anything else

Brilliant, that fixes it!

Thanks for your help @levy

Solved