• 0
Sign in to follow this  
Followers 0

How to add tags to the nav

Question

Posted · Report post

Is there a way to add tags within the tags of the main nav? for instance, instead of: Home I want this to be generated as: Home

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Rather than adding span tags to the code itself, you can create CSS that adds styles to the menu items. For example: [code]li.page_item {text-align: left;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My need for doing this is to create tabs with rounded corners, which would be supported on all browsers. I.E. does not have a way to create radius corners, like Firefox. Therefore, what I do is wrap the nav item as described above. This allows me to create each tab with 3 backgrounds: 1 for the left side of the tab (non-repeating image), one for the middle (repeating x), and one for the right (non-repeating). As far as I know, there is not a way to create this effect with CSS on a single li tag.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have you seen this?: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Btw, this would be an example of the CSS for the above code: /* top nav hover */ div#top ul li a:hover{ float:left; width:auto; background:url(images/nav_midlebg.gif) repeat-x 0 0; } div#top ul li a:hover span.left{ float:left; width:auto; background:url(images/nav_leftbg.gif) no-repeat 0 0; } div#top ul li a:hover span.left span.right{ float:left; width:auto; background:url(images/nav_rightbg.gif) no-repeat right top; padding:0 19px; display:block; font:bold 12px/33px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A21827; background-color:inherit; cursor:pointer; } /* top nav active */ div#top ul li a.active{ float:left; width:auto; background:url(images/nav_midlebg.gif) repeat-x 0 0; } div#top ul li a.active span.left{ float:left; width:auto; background:url(images/nav_leftbg.gif) no-repeat 0 0; } div#top ul li a.active span.left span.right{ float:left; width:auto; background:url(images/nav_rightbg.gif) no-repeat right top; padding:0 19px; display:block; font:bold 12px/33px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A21827; background-color:inherit; cursor:pointer; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you really need to edit the navigation code to add span tags, you will need to make sure that PlatformBase is activated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am currently using platformbase. I just haven't found where to modify the nav. The section.nav.php file would make sense, but I don't see any way to make the changes I am after within that code.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What code needs to be modified to make this happen?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0