How to add a menu with tabs?

Hey all,

I would like to know how to make a menu with tabs like buttons?

Is this possible with a script? If yes, which one?

Thanks,

See if this helps: https://help.forumotion.com/t27228-three-navigations-bars-on-your-forum

TY,

However, do you know where I can find some button models?

Thanks,

Hi betclever,

Do you mean navigation images ? If so, you can find them here in the gallery : https://help.forumotion.com/f9-gallery

Thanks Ange Tuteur,

I got a question regarding the bar I have at the moment on the left side on the top of the page.
Can I move it to the center?

Hello,

In your CSS find ul.navlinks { and change top to top: 40%; or something that fits you.

Thanks but can I move it to the center just under my title "Betclever" and rotate it to horizontal?

www.betclever.net

Add this to your CSS :
Display > Colors > CSS stylesheet

Code:

ul.navlinks a { display:inline }
ul.navlinks {
  border:4px solid #FFF;
  border-radius:6px;
  padding:6px;
  top:240px;
  left:40%;
}

Thanks Ange Tuteur but can we fix the bar cause when you scroll down, the bar follow the scroll

Oops I didn't notice  

Try now :

Code:

ul.navlinks a { display:inline }
ul.navlinks {
  position:absolute;
  border:4px solid #FFF;
  border-radius:6px;
  padding:6px;
  top:210px;
  left:40%;
}

Thanks Ange Tuteur,

I have another problem regarding this navigation bar.

I want to hide some buttons like galery, calendar but I can hide them for members but not for administrators.
Is it possible to hide them or remove them?

Can I remove the borders and just keep the buttons and is it possible to center this one? (The new one)

Please find the print screen:

Add this to your stylesheet :

Code:

a.mainmenu[href*="gallery"], a.mainmenu[href="/calendar"] { display:none }

It should hide those buttons.

Adjust the 40% here :

Code:

ul.navlinks {
  position:absolute;
  border:4px solid #FFF;
  border-radius:6px;
  padding:6px;
  top:210px;
  left:40%;
}

to a lower number, like 35%.

Thanks,

This is what I have added:

Code:

a.mainmenu[href*="gallery"], a.mainmenu[href="/calendar"], a.mainmenu[href="/groups"], a.mainmenu[href="/search"], a.mainmenu[href="/members"] { display:none }

However, how can I remove members from the nav bar cause I have tried this

Code:

a.mainmenu[href="/members"]

It doesn't work...

Any possibility to remove the border from the style?

Use this for members :

Code:

a.mainmenu[href="/memberlist"]

See if this removes the background, border, and shadow :

Code:

.linklist.navlinks.borderless {
  border:none;
  background:none;
  box-shadow:none;
}

Ok, it works with memberlist but for the second code, nothing happens when I paste this one.
However, do you see the space between the buttons?

Is this possible to have the same space between the buttons?

Okay, try now :

Code:

.linklist.navlinks.borderless {
  border:none !important;
  background:none !important;
  box-shadow:none !important;
}

See if this helps the spacing :

Code:

.linklist.navlinks li { margin:0 -4px }

You might need to add some margin to your links.

It doesn't work with the first code.
However the second one works for the spaces but it's bigger see print screen:

Weird, try clearing your cache. This is what I see :

Indeed

Sorry for this

Last question for this navigation bar, is it possible to center this one automatically cause when an user will be connected, he will see 1 or 2 mores buttons and the bar goes to the right or to  the left and it's annoying.

Thanks a lot for your help Ange tuteur

EDIT: I have tried with another browser and it works when you are disconnected but when I'm connecting, the design changes to the old one even if I delete the cookies or the content of my browser.
Super strange

As long as you're using no background on the navigation this trick should work for centering it :

Code:

.linklist.navlinks.borderless {
  left:0 !important;
  right:0 !important;
  text-align:center;
}

Super Ange tuteur, it works perfectly for the last code but did you read my previous post regarding the problem I have with the navigation bar when I'm connected?
I don't have this problem when I'm disconnected.

Super weird

Ooh could you send me a test account by PM ?

Thanks

Ange Tuteur wrote:Ooh could you send me a test account by PM ?

Thanks

Done.

Okay, add this to your stylesheet :

Code:

ul.navlinks {
  left:0 !important;
  right:0 !important;
  text-align:center;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

MAGNIFIQUE!

Nice job Ange tuteur and thanks for your time, super efficient as usual!

You're welcome !

Topic archived

Have a great day.