Fixed vs auto width nav
Permalink
Hi,
I'm setting up a main menu and I need some advice on html/css styling for the autonav. My site designer made some of the text labels on the menu take up two lines and some take up one line.
So, how do I get the text in my menu to break to a new line, and give each button a unique width? Put a '<br>' in the page title? But how do I set the width of each button? See image.
I'm setting up a main menu and I need some advice on html/css styling for the autonav. My site designer made some of the text labels on the menu take up two lines and some take up one line.
So, how do I get the text in my menu to break to a new line, and give each button a unique width? Put a '<br>' in the page title? But how do I set the width of each button? See image.
I'd suggest you check out Kino's Image Menu add-on to use images for your menu links. I'm not saying this is the only option, but it seems like it would work well for your issue. You can find the add-on here:http://www.concrete5.org/marketplace/addons/kinos-image-menu/...
Another option I thought of was to add a custom attribute to your pages called "Menu Label" and then you could populate that in each Page Properties with your page names plus the <br /> tag where necessary.
You'll need to create a custom template for the auto-nav block to pull those page attributes rather than the actual page name, but this isn't too hard.
You'll need to create a custom template for the auto-nav block to pull those page attributes rather than the actual page name, but this isn't too hard.
Thanks LucasAnderson,
This thing is due tomorrow at 9am (central) so your response is much appreciated.
I hadn't fully explained what I need so I changed the question after reading your posts.
I also need to set a specific width for each menu button, as well as make sure it breaks to a new line at the right point.
Kino's Image Menu looks handy. I'm wondering if it relies on already having most of the menu css setup, and it just takes care of the rollovers. Ever use it?
Your second suggestion would work perfectly, except that I forgot to mention that I need each button to be set to a specific width, too.
Right now I have the ridiculous solution of wrapping the actual page title in a div tag in the actual page properties "name" field.
<div id="menu-item1">
Mechanical<br>Locks
</div>
Then I can set the width of each button via CSS. But this solution creates problems in other areas, like the sitemap, and search results.
I'd think this would be a common issue, but maybe this is one of those problems I created for myself :)
This thing is due tomorrow at 9am (central) so your response is much appreciated.
I hadn't fully explained what I need so I changed the question after reading your posts.
I also need to set a specific width for each menu button, as well as make sure it breaks to a new line at the right point.
Kino's Image Menu looks handy. I'm wondering if it relies on already having most of the menu css setup, and it just takes care of the rollovers. Ever use it?
Your second suggestion would work perfectly, except that I forgot to mention that I need each button to be set to a specific width, too.
Right now I have the ridiculous solution of wrapping the actual page title in a div tag in the actual page properties "name" field.
<div id="menu-item1">
Mechanical<br>Locks
</div>
Then I can set the width of each button via CSS. But this solution creates problems in other areas, like the sitemap, and search results.
I'd think this would be a common issue, but maybe this is one of those problems I created for myself :)
Why not add another custom attribute called "Nav Width" for each page? Then you could set a different width for each page's nav button in the Page Properties. You would then set the nav label width in the custom auto-nav template via the CSS width property, which would pull in your new custom attribute?
Sorry if that's confusing.
Sorry if that's confusing.
I'm not sure what's more confusing; that, or a guy pile-driving a shark! jk
I think the custom page attributes are the best solution. But I've never done that before, and won't be able by tomorrow, so I'll have to come up with a half-ass solution for tomorrow's meeting, and fix it after every one goes home. Thanks for your help.
I think the custom page attributes are the best solution. But I've never done that before, and won't be able by tomorrow, so I'll have to come up with a half-ass solution for tomorrow's meeting, and fix it after every one goes home. Thanks for your help.
