Joomla Templates Club 406,261 posts

[icbl Friend icblJoin date: December 2010Posts: 242Downloads:0Uploads:28 Thanks: 86 Thanked: 7 times in 1 posts]

#169645

I am trying to add new menu module as pictured but could not figure out how to do this?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#419166

The easiest way to go about this would be to create your new menu (within your Menu Manager) – and save it as something like “header Menu” (or whatever you want to name it).

Then you will need to create some custom CSS for this menu – including the menu item separator image and positioning – so you can style it the way you want. This is not a difficult task – especially if you are familiar with the basics of CSS. (are you?)

You would then assign the menu to the same position that “JA Login” is assigned.

1 user says Thank You to TomC for this useful post

1. icbl

[icbl Friend icblJoin date: December 2010Posts: 242Downloads:0Uploads:28 Thanks: 86 Thanked: 7 times in 1 posts]

#419169

Hi Tom,

I am not very good with CSS but with little puch or sample I can handle it 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#419174

<em>@icbl 275714 wrote:</em><blockquote>Hi Tom,

I am not very good with CSS but with little puch or sample I can handle it :)</blockquote>
okay … give me a little bit and I’ll try to provide some guidance for you

1 user says Thank You to TomC for this useful post

1. icbl

[icbl Friend icblJoin date: December 2010Posts: 242Downloads:0Uploads:28 Thanks: 86 Thanked: 7 times in 1 posts]

#419175

I’ll do that asap and will get back to you.

Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#419228

Okay, now I did something similar to this with JA Rave, so I can give you some basic principles to guide you – which you can experiment with some trial-and-error until you get the result you want.

The following is for CONCEPT PURPOSES ONLY – not as an exact solution for your particular site.

STEP ONE:
Create a new menu – with the menu items you want – name it (I named mine “Top Nav”)

STEP TWO:
Go to path pluginssystemjat3jat3base-themesdefaultblocks. Open header.php

Paste the following code at about line 13 to create a new div . .


<?php if($this->countModules('top-nav')) : ?>
<div id="top-nav">
<jdoc:include type="modules" name="top-nav" />
</div>
<?php endif; ?>


STEP THREE:
Open TemplateDetails.xml – path templates/ja_social/templatedetails.xml

Within the “positions” listing, add –> <position>top-nav</position>

STEP FOUR:
Create CSS for the new div within your template.css file
(again, this is just an example for what I used for JA Rave – so you WILL need to tweak and experiment with the positioning and such)

I entered this code just below where the CSS for the logo is (likely around line 475 for JA Social)


#top-nav {
position: absolute;
top: 10px;
right: 200px;
}

#top-nav a { color: #000; text-decoration: none; }

#top-nav ul {
margin: 0;
padding: 2px 0;
}

#top-nav li {
display: inline;
margin: 0;
padding: 0;
line-height: 1.6;
background: url(../images/vline.gif) no-repeat center right;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
}

#top-nav li a {
display: inline;
padding: 0 10px;
}


I’ve attached the image file for the separator image “vline.” I’m thinking you may need to create your own to better fit within the color theme you’re using.

That’s basically the concept . . . Give it a shot and learn/grow from the process.

😎

---

Attachments:

1. 

1 user says Thank You to TomC for this useful post

1. icbl

[icbl Friend icblJoin date: December 2010Posts: 242Downloads:0Uploads:28 Thanks: 86 Thanked: 7 times in 1 posts]

#419542

Hi Tom,

Thanks very much. 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#419544

<em>@icbl 276162 wrote:</em><blockquote>Hi Tom,

Thanks very much. :)</blockquote>
I hope the general principle I outlined for you helps to guide you to get the result you want.

If it does, please do let us see … and, perhaps, let us know if there were any additional steps you needed to take.

[un101066 Friend un101066Join date: November 2011Posts: 3Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 2 posts]

#426680

<em>@TomC 275784 wrote:</em><blockquote>Okay, now I did something similar to this with JA Rave, so I can give you some basic principles to guide you – which you can experiment with some trial-and-error until you get the result you want.

The following is for CONCEPT PURPOSES ONLY – not as an exact solution for your particular site.

STEP ONE:
Create a new menu – with the menu items you want – name it (I named mine “Top Nav”)

STEP TWO:
Go to path pluginssystemjat3jat3base-themesdefaultblocks. Open header.php

Paste the following code at about line 13 to create a new div . .


<?php if($this->countModules('top-nav')) : ?>
<div id="top-nav">
<jdoc:include type="modules" name="top-nav" />
</div>
<?php endif; ?>


STEP THREE:
Open TemplateDetails.xml – path templates/ja_social/templatedetails.xml

Within the “positions” listing, add –> <position>top-nav</position>

STEP FOUR:
Create CSS for the new div within your template.css file
(again, this is just an example for what I used for JA Rave – so you WILL need to tweak and experiment with the positioning and such)

I entered this code just below where the CSS for the logo is (likely around line 475 for JA Social)


#top-nav {
position: absolute;
top: 10px;
right: 200px;
}

#top-nav a { color: #000; text-decoration: none; }

#top-nav ul {
margin: 0;
padding: 2px 0;
}

#top-nav li {
display: inline;
margin: 0;
padding: 0;
line-height: 1.6;
background: url(../images/vline.gif) no-repeat center right;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
}

#top-nav li a {
display: inline;
padding: 0 10px;
}


I’ve attached the image file for the separator image “vline.” I’m thinking you may need to create your own to better fit within the color theme you’re using.

That’s basically the concept . . . Give it a shot and learn/grow from the process.

:cool:</blockquote>

Hi TOM

I found your guideline and my first impression was, not to complicated a easy step by step solution.
I did now all the steps in my JA social Template but for what ever reason nothing shows up on the top.
I checked the steps several times and tried to debug step by step. But this time I do not find the reason fro not showing anything on the top bar.
I tried to link a html module with a simple test to the module div, but this also does not show up.
Any idea, I was so happy finding this post and now after two hoers I give up and need your help.

Thanks UN101066

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#426684

Two things I would suggest are to make sure you have cleared both your JAT3 cache (upper right in your site administration) and your browser cache – then refresh your page and see if you get the result you’re looking for.

If that does not work, my next suggestion would be to make sure everything that you can update (via your Extension Manager) is updated.

[un101066 Friend un101066Join date: November 2011Posts: 3Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 2 posts]

#426720

All recommendations done, but no change and I do not see the menu in the fronted.
I link a html module to the new top-nav module position to test the fronted, but nothing shows up.
Any idea what could be the problem?

Thanks UN

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#429865

Were you able to resolve this issue?

If not, I would need to see your site administration as well – to see how you configured things.
If you haven’t resolved this issue, then you can send me a PM with temporary admin access.

You may also want to refer to/review THIS DISCUSSION[/url] concerning the same issue.

[Author]

Posts