Adding a menu item in the...

User 358530 Photo


Registered User
50 posts

HiYa,

I am trying to add a new menu item to the top menu bar in the Half-Deserted Streets theme. I notice that all the default menu items use an id= argument within the <li> tag. What would I enter in the id= for my new menu item? I've looked and can not find where the id= arguments are defined?

What's left of my gray matter is not working so good tonight. Maybe I don't understand the id= argument?? :)

Thanks for your time.
--
JamesKB
User 38401 Photo


Senior Advisor
10,951 posts

Hiya James,

All you need to do is just copy one of the lines and then fill it in with the new info like below is a default menu from a different theme (since I don't have the one you're using):

<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>

Just copy one of the lines and insert it like below:

<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>

Then just change the href site page and the name of the page and you're all done like so:

<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="mynewpage.html">My New Page</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>

You can do that to add as many extra menu links/buttons etc. as you have room for in the area you're putting your menu :)
User 358530 Photo


Registered User
50 posts

Thanks for the reply Jo Ann.

The default nav menu code for the Half-Deserted Streets theme uses id=" construct within the <li> tag. See the attached jpg file.

Any ideas?

Thanks for your time.
--
JamesKB
Attachments:
User 597929 Photo


Registered User
1,332 posts

Those are labels that trace back to sections in the corresponding style sheet (whatever.css). Since they use "id" and not "class" there is probably a unique style set for each of the menu items, and you'd want to create one for your new menu item, give it a unique label, and reference that label in the "id" for the new item.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 562592 Photo


Registered User
2,038 posts

Spinny is correct. Look for the CSS (cascading style sheet) and try to find those unique id names, and then you will see the styles associated with them.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 358530 Photo


Registered User
50 posts

I've just looked in all the CSS files and do not find any of the unique id names in any of them?

Ideas?

Thaks for your time.
--
JamesKB
User 38401 Photo


Senior Advisor
10,951 posts

Yep what they said lol, sorry I wasn't able to address that part as I didn't have the code to go by for your particular theme. Check the css folder in your project area and you should have at least 1 file in there to look in. These can be opened up right in the HTML Editor.

Sorry I wasn't able to show you exactly what you were looking for as I didn't have your code and realize which ID's you were talking about, I was assuming it was the one that encompasses the menu which in your case was the "nav" and just assumed you needed to know how to enter new items on it. :)

Good luck on it and let us know if you need more assistance :)
User 597929 Photo


Registered User
1,332 posts

Declaring an id label in an HTML element gives you the option of defining a specific style for it in CSS, but it doesn't obligate you. It's possible the designer of the template decided they didn't need special styling and left it at that.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
User 358530 Photo


Registered User
50 posts

AH HA!!! You hit right on the head Spinny. The id labels are in the html code but the designer did not declare them in the css files.

Thanks for you help.
--
JamesKB
User 463058 Photo


Ambassador
1,086 posts
Online Now

Normally, ID's such as those in your menu are used to provide a persistent page indication.

This basically means, when you are on the Home page, the home link will be highlighted. When you are on the About Us page, that page's link will be highlighted, etc.

This method also normally uses a unique ID for the body tag of each page, so the body tag of the Home page might look like this:
<body id="homepage">


The body tag for the About Us page may look like this:
<body id="aboutpage">

...and so on.

Do the body tags for your pages have ID's?

If not, then this menu code may have been reused from another project by the theme's devoloper, and it may not matter if the new menu link you create has an ID. However, if the body tags do have ID's, then make sure you haven't overlooked some styling in the style sheet that might look something like this (the body id's are based on the examples I made up above).
#homepage #home a, #aboutpage #about a, #servicespage #services a, #photospage #photos a, #contactpage #contact a {
some:styling;
some:styling;
}


There can be other variations on this. Maybe instead of "#homepage #home a" it has "body#homepage li#home a:link".

If you do see this sort of code, you should create unique ID names for your new link and the body tag of the page it points to. Then you need to add them to the selector of the style rule you found for them.


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.