Stylizing a vertical menu

patvandenbosche

I've got two templates styles I'm using on this site, but I'm specifically trying to configure Build.r for the page for the Chamber of Commerce, http://cityofclifton.com/index.php/chamber-of-commerce. There is a vertical menu in Grid14 I've added, but the styling is missing. It is just a generic vertical list. I'm not familiar enough with CSS to know how to write the custom css to stylize the menu. Can you please get me started? I looked at examples online, but it just didn't click since they were for basic html code.

The div ID = "grid14" and the class = "zg_col zg_col_6" which is what I could see in Firebug. I also used the Zen menu settings for a subtext line and icon, but the menu lines are all run together. I've attached a screenshot which may help explain what I'm trying to do. There may have been a way to stylize this in the Build.r template, but again I didn't know what to add to it. I hate to think I need to buy an extension just to get a menu to look good.

Thanks for your help.
Pat

Joshua-M

Hi,

I can see your module "Here We Are", but I'm not sure how exactly it should look? To increase the line spacing, please add the following custom css code:

.zen-menu-546 > li {
    line-height: 2;
}

Cheers
Joshua

paulus1031

looking at your custom css styling

.zen-menu-546 > li {
line-height: 4;
decoration: none;
}

you actually want

.zen-menu-546 > li {
line-height: 4;
list-style-type: none;
}

Cheers
Paul

patvandenbosche

Once again you've come to my rescue! I had just about called it quits for today, when your email arrived with the "cherry on top" finish to my very tiring day. Thank you so much! That looks ever so much better without the bullets. This was my first time to use two templates on one site, and it has been exhausting to say the least, mentally at least. You are my hero.

paulus1031

You're welcome

Best of luck with the site / templates 🙂

Cheers
Paul