Navigation Bar - Two levels of text
I am looking to either download or create a navigation bar that has two levels of text. I want to communicate more information on the Navigation buttons but being restricted to one line of text is restricting this. There is noting in the gallery so I assume i'd need to build one, but my attempts have proven ineffective thus far. I can make a series of separate buttons with two lines of text but not a full navigation bar.
My last attempt on a live website ended up slightly breaking my Nav bar. Now when a mouse is hovered, two nav buttons highlight (on all pages except the 'Index' page). I can't seem to fix this, even with replacing the nav bar (https://www.oetc.ca)
Any ideas or instruction on how I might be able to create a two text line nav bar OR fix my current nav bar.
Thanks,
Re: Navigation Bar - Two levels of text
Thev, your Navbar doesn't have any sub-menus so you have no real need for one.
You don't have a variant.
Your Home Link appears to have been typed in as the top URL as opposed to being Link to: 'Page: index'.
You may have made adjustments to the MouseOver objects and they have been displaced.
You have links duplicated:
Home
Course Store
eTrainer
FAQ's
Browser Issues
Browser Issues
Invoice Set-up
Browser Issues
Newsletter
Contact us
Resources
Log In
Resources
Log In
It would be better to scrap the NavBar and rebuild it.
You can have multi-row NavBar buttons but it is too messy and would be hard to explain and maintain.
Acorn
1 Attachment(s)
Re: Navigation Bar - Two levels of text
Re: Navigation Bar - Two levels of text
Thanks Acorn,
How are you seeing multiple/duplicate links, as I do not see the same thing? Knowing this could help me troubleshoot the solution.
I have scrapped this Nav bar and started fresh in the past, but end up with the same issues with the mouseover. I will experiment with different Nav bars to see if the issue will now go away in v20. I will also make a point of reviewing/deleting the ..._xar_files to make sure nothing is stranded (as I now think this is why replacing the Nav bar didn't solve the issue in the past, stranded file remnants).
Regarding your Demo; might I ask how you achieved the two lines of text? When I attempt to add new text, it reverts to a single line. I also see that in the Nav Bar menu that all 2 lined text appears without a space between the text. In any case, I'd interested in learning how you did that if you have the time.
Regarding the two text lines, I want to achieve this for a Nav bar for another web project in where I have piles of information to present in HTML format on different pages. If I could be more descriptive on the Nav bar page buttons, it would be advantageous for the project and look more professional.
Thanks Acorn,
1 Attachment(s)
Re: Navigation Bar - Two levels of text
Quote:
Originally Posted by
Thev
Thanks Acorn,
How are you seeing multiple/duplicate links, as I do not see the same thing? Knowing this could help me troubleshoot the solution.
I have scrapped this Nav bar and started fresh in the past, but end up with the same issues with the mouseover. I will experiment with different Nav bars to see if the issue will now go away in v20. I will also make a point of reviewing/deleting the ..._xar_files to make sure nothing is stranded (as I now think this is why replacing the Nav bar didn't solve the issue in the past, stranded file remnants).
Regarding your Demo; might I ask how you achieved the two lines of text? When I attempt to add new text, it reverts to a single line. I also see that in the Nav Bar menu that all 2 lined text appears without a space between the text. In any case, I'd interested in learning how you did that if you have the time.
Regarding the two text lines, I want to achieve this for a Nav bar for another web project in where I have piles of information to present in HTML format on different pages. If I could be more descriptive on the Nav bar page buttons, it would be advantageous for the project and look more professional.
Thanks Acorn,
Thev, I don't have your design file.
All i did was scrape over the NavBar text, selecting all, and pasted into a text editor.
The extra labels appears. I therefore had to assume that you had displayed objects on the MouseOver layer.
Purging all these would be a drag so build a new NavBar from scratch deleting all and everything from MOff and MOver layers connected with your existing NavBar.
I chose a suitable NavBar and edited into it and picked Ungroup to edit graphics.
Next I deleted all but the first button and removed the Soft Group and then deleted the MOver objects.
You are then left with a Text Area and a Shape, Grouped. You can created these directly if you have your own design.
Make sure the Text Area will hold two lines of text with a small Line spacing.
Change the height of the shape.
Recentre text and shape.
Clone the Group and altered colours.
Move this Group to the MOver layer.
Soft-group both Groups.
Clone across for the required number of buttons.
Create a NavBar from these.
Now edit directly into each button and change the top line and bottom line separately.
Choose the NavBar is set for all buttons to be the same width or fit to text.
Add links and sub-menus...
Clone the NavBar and Ungroup to edit graphics and you get a collection of properly spaced-out Buttons.
Use this for top-level NavBar.
Use the NavBar when you have sub-menus.
For your other project, don't use a NavBar, use a Text Panel.
I tried Smart Text Panel 17:
Attachment 134834
Far more flexible.
Remember to untick Underline Text links and use common website link colours.
Acorn
Re: Navigation Bar - Two levels of text
Quote:
Originally Posted by
Thev
I am looking to either download or create a navigation bar that has two levels of text. I want to communicate more information on the Navigation buttons but being restricted to one line of text is restricting this. There is noting in the gallery so I assume i'd need to build one, but my attempts have proven ineffective thus far. I can make a series of separate buttons with two lines of text but not a full navigation bar.
My last attempt on a live website ended up slightly breaking my Nav bar. Now when a mouse is hovered, two nav buttons highlight (on all pages except the 'Index' page). I can't seem to fix this, even with replacing the nav bar (
https://www.oetc.ca)
Any ideas or instruction on how I might be able to create a two text line nav bar OR fix my current nav bar.
Thanks,
Thev.. another school of thought. This is a busy sight, and a lot is going on. I’ve seen some larger city sites and keeping it simple might be your best option. My opinion only. If you’d like more info on your buttons how about a large sticky dark coloured rectangle on top. Type your categories/buttons in white. Move those onto your rectangle and just create links. You could also make the text color change as rollovers. Here’s a busy sight. https://www.saskatoon.ca/
Another option might be creating a new page for sub categories .. melfortmuseum.org. Click on “events” this takes you to a new page. Would you find that helpful? You’ve don’t this on some of your pages, and on some pages you’ve just added a simple link from text.
Sorry if I’m way of base, but on larger sites you’ll notice on footers, or headers, they’ve listed the navigation in a simple way; and it may work for sites such as yours. I find that roll overs, with many buttons may get confusing. Simply a few ideas.
Re: Navigation Bar - Two levels of text
Quote:
Originally Posted by
bwood
Thev.. another school of thought. This is a busy sight, and a lot is going on. I’ve seen some larger city sites and keeping it simple might be your best option. My opinion only. If you’d like more info on your buttons how about a large sticky dark coloured rectangle on top. Type your categories/buttons in white. Move those onto your rectangle and just create links. You could also make the text color change as rollovers. Here’s a busy sight.
https://www.saskatoon.ca/
Another option might be creating a new page for sub categories .. melfortmuseum.org. Click on “events” this takes you to a new page. Would you find that helpful? You’ve don’t this on some of your pages, and on some pages you’ve just added a simple link from text.
Sorry if I’m way of base, but on larger sites you’ll notice on footers, or headers, they’ve listed the navigation in a simple way; and it may work for sites such as yours. I find that roll overs, with many buttons may get confusing. Simply a few ideas.
Thanks for the advice bwood. This particular site has grow over the years to its current format, it's old and is in need of an update. I will consider your suggestions when updating. Acorn has found a solution to the mutli leveled text of the navigation bar, but I may also incorporate a new index page to simplify the initial navigation and general business as per your suggestions.
Re: Navigation Bar - Two levels of text
Thanks for the added information and instruction Acorn. I can always count on you to provide workable solutions. In v20 I don't have Text Panel 17 but I do still have these assets from previous version folders. I didn't realize how much less v20 has in terms of assets until looking for Text Panel 17. I will follow your instruction to build the Nav bar just so I know how to do this and to use in the current website; but I think I will follow your advice on the new project and just use a text panel instead of a Nav Bar. The project entails a series of websites (around 6 in total) all linked together but each with vastly different information and navigation titles. Your text Panel idea may be a better solution for that project.
