The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Nav bar with images on Invision

View previous topic View next topic 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:


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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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



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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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



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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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


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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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



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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.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





APE
Manager
Manager

Male Posts : 8319
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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