Joomla Templates Club 406,261 posts

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

#171705

I have seen this topic/question come up frequently enought that I thought it would be helpful to provide some basic guidelines for how to add a vertical navigation menu to the “top” to any given J1.7 Template.

Though this tutorial should work for any J1.7 template . . . for the purposes of this tutorial, I am using JA-RAVE as my example template and we will be calling our new position “top-nav.”

STEP ONE:
Within your chosen text editor (I use Notepad++), open header.php – which can be found within the following path –> pluginssystemjat3base-themesdefaultblocksheader.php

Add the following code at the top (after the copyright info)

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

STEP TWO:
Open your templateDetails.xml file (the path will be similar to –> templatesja_ravetemplateDetails.xml)

Add <position>top-nav</position> to the list of positions

STEP THREE:
Open your template.css file

You will be adding code similar to the following (though you will need to modify the positioning parameters to fit the particular needs for your site. I have bolded the parameters you are likely going to need to custimize for your own needs)

You can add this code anywhere within your template.css file … I added mine just below the css for my logo –
but many choose to add it to the end/bottom of their template.css file. The choice is completely up to you.

#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;
}

IMPORTANT CUSTOMIZATION NOTE:
The parameter background: url(../images/vline.gif) no-repeat center right; refers to a small vertical spacer in between menu items that I used. If you would like to use a similar spacer, I have attached the image file to this tutorial. (You can, of course, create your own custom separator and simply replace the image within the aforementioned “background” parameter)

STEP FOUR:
Create a new menu – within your Menu Manager – and name it “Top-Nav” . . . or really, name it whatever you want to name it.
Of course, you will then need to create your desired menu items.

During the new menu creation process, it will ask you to name the module that corresponds with this new menu. Again, you can name it “Top-Nav” or whatever you want.

If you are unsure as to how to create a new menu within your Menu Manager and/or Menu Module, here are a couple of visual tutorials (found on YouTube) to provide some guidance:

STEP FIVE:
Publish your new menu (and corresponding menu module)

SAVE CHANGES . . . CLEAR CACHE . . . REFRESH PAGE

That should be it. Of course, with ANY custom modifications, there WILL likely be a bit of trial-and-error – and PATIENCE – you will need to utilize while testing and configuring things to work with and for YOUR particualr website needs. Just take your time . . . utilize basic deductive logic for figuring things out that might not work the first (or first few) times . . . utilize the JoomlArt Forums and internet for additional research – if needed. (Honestly, Google can be your BEST FRIEND for researching questions on most any issue – including Joomla related development issues.)

So, for those of you who have been wanting to add an additional menu to the top area of your site,
I hope this BASIC GUIDELINE tutorial helps.

ALSO . . . .
In the spirit of our being one big happy “JoomlArt Community” … if you use this tutorial for a different template and find that you had to make some modifications in the process to get it to work, PLEASE SHARE YOUR SOLUTIONS with us all here in this thread.

😎

---

Attachments:

1. 

[antoniliyn Friend antoniliynJoin date: November 2011Posts: 38Downloads:4Uploads:13 Thanks: 14 Thanked: 3 times in 1 posts]

#429306

I’ve done everything according to your instructions. But the menu does not appear. Site http://olympicbody.ru. See screenshot please.

---

Attachments:

1. 
2. 
3. 
4. 

[antoniliyn Friend antoniliynJoin date: November 2011Posts: 38Downloads:4Uploads:13 Thanks: 14 Thanked: 3 times in 1 posts]

#429729

Greetings. The problem is not solved. Can you help me?

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

#429758

Remember, the tutorial is written in GENERAL terms . . . there may be some more specific modification that is needed for your particular site.

For example – perhaps there is a position/div overlap issue wherein you may need to set a “z-index” value for #ja-topnav
(e.g. z-index: 999;)

Just a thought – though it depends on how your other divs within the header section are configured.

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

#429848

<em>@antoniliyn 289267 wrote:</em><blockquote>Greetings. The problem is not solved. Can you help me?</blockquote>
In taking a look at your code . . . and seeing the colors of your site . . . I’m assuming that you positioned your top menu within the top black bar at the top of your site, correct?

If this is the case, then – although I may be mistaken – one issue may be that you have your font color set at “000” – which is black.


#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;
}


[FONT=arial]

Try changing the color to white (or “fff”) – for example . . .

#top-nav a { color: #fff; 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: #fff;
}


Let me know if that works.

It would also be helpful to know what you named the new menu you created within your Menu Manager.[/FONT]

[antoniliyn Friend antoniliynJoin date: November 2011Posts: 38Downloads:4Uploads:13 Thanks: 14 Thanked: 3 times in 1 posts]

#429898

Unfortunately. It did not help me. Does not display even a title. See screenshot, please.

I do not understand. What does not display the menu?

---

Attachments:

1. 

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

#430157

<em>@antoniliyn 289487 wrote:</em><blockquote>
I do not understand. What does not display the menu?</blockquote>

I checked through your site administration and things appear to be configured correctly. I would like to check through your css files as well. Can you please PM me FTP access information so I can check out the relative css files as well?

[antoniliyn Friend antoniliynJoin date: November 2011Posts: 38Downloads:4Uploads:13 Thanks: 14 Thanked: 3 times in 1 posts]

#430603

Hi. The menu does not work. Can not do anything. The data ftp I sent you two days ago. Can you help me?

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

#430783

<em>@antoniliyn 290391 wrote:</em><blockquote>Hi. The menu does not work. Can not do anything. The data ftp I sent you two days ago. Can you help me?</blockquote>
I just came across a previous TUTORIAL I wrote for this same issue –> SEE POST #2 <–

See if the steps outlined there are any more helpful?

:((

[Author]

Posts