Nav bar with images on Invision

Go down

Solved Nav bar with images on Invision

Post by Zed is Not Dead on October 3rd 2015, 1:21 am

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:
Nav bar with images on Invision M3AsJbz

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

Nav bar with images on Invision 5B7Uyi4

this is how it looks now:

Nav bar with images on Invision PMh9zBt

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

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Ange Tuteur on October 3rd 2015, 11:27 am

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Zed is Not Dead on October 3rd 2015, 11:40 am

alright it worked

Nav bar with images on Invision PO4uney

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.
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Ange Tuteur on October 3rd 2015, 1:12 pm

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;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Zed is Not Dead on October 3rd 2015, 7:36 pm

Nav bar with images on Invision J6F7uJW

it worked for the background but there is still that space issue
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Ange Tuteur on October 3rd 2015, 7:49 pm

Weird, do you have somewhere I can take a look at it ? Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Zed is Not Dead on October 3rd 2015, 7:55 pm

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
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Ange Tuteur on October 3rd 2015, 8:29 pm

I found the culprit ..! The calendar button. Lol
Nav bar with images on Invision Captur93

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

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Zed is Not Dead on October 3rd 2015, 8:39 pm

awesome as always

Nav bar with images on Invision TxnJwPp

but now how do I lower the banner so that it doesn't show that cut off?
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Ange Tuteur on October 3rd 2015, 10:01 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by Zed is Not Dead on October 7th 2015, 7:06 pm

Oh this i solved btw
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Nav bar with images on Invision

Post by APE on October 7th 2015, 7:21 pm

Topic solved and archived


My PM's are closed I am away on leave
Nav bar with images on Invision Left1212Nav bar with images on Invision Center11Nav bar with images on Invision Right112
Nav bar with images on Invision Ape_b110
Nav bar with images on Invision Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14600
Reputation : 1596
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum