Nav bar with images on Invision

So I recently made a nav bar to use for our site on Fairy Tail Online but when posting it onto the forum and I have checked and double check the options are selected as Image only and force on nav bar, but idk if it is coding on invision's part or what but the images separate from each other so I have to use our really bad default nav bar and I want to use the one I made to make the site pop out more but again for whatever reason the site doesn't want to allow it.


Here is how it looks on my Mock site which is an Invision forum:


I tested on all invision skins and forms to prove that that is how it looks. Any way to fixing this?

this is what I want the nav bar to do



this is how it looks now:



The placement for the nav bar is center and exactly where our current one is now minus that black background

Hi @Zed is Not Dead,

I believe it's a padding and margin on the menu links which is making the images appear spaced. Try adding the following CSS rule to your stylesheet.

Code:

#submenu a.mainmenu {
  padding:0;
  margin:0;
}

It should reset the padding and margins on the menulinks.

alright it worked



but how do I get rid of the background color? like on the fairy tail site it is black and idk how to get rid of it also idk why but there is a slight cut off on FAQ and I double checked with the spacing I created that space issue shouldn't be there.

It could be whitespace from another link, but try and test this :

Code:

#submenu { font-size:0 }

It'll set the font-size to 0, most likely hiding any whitespace. About the background color, you mean the navbar background, right ? Should be able to use the same selector. ( #submenu is invision's navbar selector, or id since it starts with a hash )

So, this CSS should remove the background color :

Code:

#submenu {
  background-color:transparent;
}

it worked for the background but there is still that space issue

Weird, do you have somewhere I can take a look at it ?

http://rpgskinlayouts.forumotion.com/ that is the mock site I'm waiting to fix the problem before I post it on the fairy tail site

I found the culprit ..! The calendar button.


You can either add a image, hide the calendar button, or move it to the end of the navigation via Display > Headers and Navigation.

awesome as always



but now how do I lower the banner so that it doesn't show that cut off?

As far as I can tell, the navbar adds quite a bit of whitespace. The only effective solution I can see would be to extend that part of the background image so it fades just after the navigation.

Oh this i solved btw