How can i get a multirow menu bar?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
8/16/2012 11:09:57 AM
Antonio Salazar
Gravatar
Total Posts 27
View Posts

How can I get a multirow menu bar?

Is there a way to have a multirow horizontal menu bar? We have a few users who need to use low screen resolutions.

If the menu has too many items the menu bar actually wraps around in a second row, but its background does not. This causes the second row menu items to float over the content and they look silly. I've reproduced the issue with the demo site, just resize the browser window.

This happens with all the artisteer 3.1 skins as far as I'm aware.

8/16/2012 4:51:08 PM
Antonio Salazar
Gravatar
Total Posts 27
View Posts

Re: How can i get a multirow menu bar?

Examining the page, it seems that the menubar div (class = art-bar, art-nav) has the atribute min-width set to exactly one row, and it doesn't grow to the height of its descendant div (class = art-hmenu) which is dynamic.

I'd like the menubar div height to be the same as the descendant div, but don't know quite how do it. I was thinking of modifying the script.js Artisteer generates to manually assign the height of the descendant div to the menubar div. I don't like this approach because it's an extra manual step to remember when we change the skin.

8/16/2012 5:22:24 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: How can i get a multirow menu bar?

Hi,

The min-width is not going to control the height of the row at all. The element containing the menu itself and that has the background attributes must have it's height set to auto in order for it to grow with the content. The default height of all elements is auto but more than likely the menu container element has a specific height set. It's very hard to determine what element(s) need their styling adjusted without seeing the skin. While the demo site has many artisteer skins that behave consistently with your description, they don't all have the same markup and style so that doesn't help much. Can you give us a link to your site so we can try to figure something out for you?

Thanks,
Joe D.

8/16/2012 5:51:11 PM
Antonio Salazar
Gravatar
Total Posts 27
View Posts

Re: How can i get a multirow menu bar?

Thanks for answering.

It's an internal site, but my skin is based on artisteer31-hovermenu, done using the steps on https://www.mojoportal.com/artisteer-31-instructions.

I can send/upload the skin if needed.

8/16/2012 6:51:14 PM
Antonio Salazar
Gravatar
Total Posts 27
View Posts

Re: How can i get a multirow menu bar?

Well, I'm not entirely sure how this worked because I had to do trial and error while inspecting the menu elements in Firefox to find what attributes to change.

Adding this to style-artisteer-overrides.css made the menu overflow to a second row correctly.

div.art-nav-outer
{
position: static; /* was absolute before */
}
ul.art-hmenu
{
float: none; /* was left before */
}

Again, I'm not sure about secondary effects, so far it works fine on all browsers. I'll try to find if this can be done directly from Artisteer.

You must sign in to post in the forums. This thread is closed to new posts.