Simple Icon Menu - Horizontal not working

Hi,

I am having trouble with displaying my icons horizontally. The site uses an artisteer template, the css of which might be a problem, Im however a newbie and apart from opening the css file of the template, I have no idea what I'm doing, so would rather not tamper with and break it.:blink:

Thanks in advance for any help. Please let me know if I should upload any files and which ones!

Regards,
Willie

15 Feb 11

I'm having the same problem. I'm using the rhuk_milkyway. The menu won't show horizontal.

Does anyone have an answer to this? Thanks.

15 Feb 11

Hi guys,

I'm sorry, but this is the sort of thing that is impossible to help with without us seeing the live site. The reason is that Ninja Simple Icon Menu *does* work and has been extensively tested, so either you have configured it wrong, or your template is overriding the Simple Icon Menu styling in some manner.

Please post a link here or email it to [support at ninjaforge dot com]

Thanks,
Mark

16 Feb 11

Hi Mark-

Thanks. My site is http://www.franjacoberger.com You can see I have it in the footer section for now.

Let me know if you need more info.

Thanks!

Best,
Fran

16 Feb 11

Hi Fran,

If you take a look at the source of your page, you'll see that something on your site is messing with the link to the Ninja Simple Icon Menu CSS file.

As a workaround, edit your Joomla template.css file and add the following to the end of it:



.nsi-container {overflow:hidden; position:relative; padding:0}

.nsi-container div {float:left; position:relative; left:50%; text-align:left;}

.nsi-container ul {position:relative; padding:0; margin:0; list-style:none;}

.nsi-container li {clear:left; float:left; margin:0; padding:10px 20px 0 0; text-align:center; cursor:pointer;}

.nsi-container span {font-weight:bold;}

.nsi-container img {border:none;}

.nsi-container a,

.nsi-container a:hover {height:100%; text-decoration:none;}

.nsi-iconhoriz-icontop div{padding:0 15px 0 0; background-position:100% 100% !important;}

    .nsi-iconhoriz-icontop ul {float:left; right:50%;}

        .nsi-iconhoriz-icontop li {clear:none;}

.nsi-iconhoriz-iconbottom div{padding:0 15px 0 0; background-position:100% 100% !important;}

    .nsi-iconhoriz-iconbottom ul {float:left; right:50%;}

        .nsi-iconhoriz-iconbottom li {clear:none;}

.nsi-iconvert a {left:0; bottom:0; width:100%; display:block}

.nsi-iconvert-l div {padding:10px 0; left:0}

    .nsi-iconvert-l li {text-align:left; width:100%; padding:0 0 10px 0}

        .nsi-iconvert-l img {float:left}

        .nsi-iconvert-l span {padding:0 0 0 10px; float:left}

.nsi-iconvert-r div {padding:10px 0; left:0; float:right}

    .nsi-iconvert-r li {text-align:right; width:100%; padding:0 0 10px 0}

        .nsi-iconvert-r img {float:right}

        .nsi-iconvert-r span {padding:0 10px 0 0; float:right}