Menu Blocks
 

Hi

Does anyone how I can achieve Menu block dividers like those found on http://www.guardian.co.uk/?

You might try using CSS to put left borders on all the menu items and then remove it from the home/first menu item with other CSS.

ok. will give it a try.

thanks.

i promise i will be posting less once i get the hang of this bit i think.

do i add css to the CSS Inserts or do I need to head to Configure CSS?

If i have a go, can you advise me if it doesn't work?

Try it in each place and report the results - learn by doing

Another option is to put a | on the sides of the name of the menu item if you use the WordPress menu (Appearance>Menus>

i tried this in the CSS insert section (this worked with a previous theme):

.menu1 {
border-left:1px solid #000;
color:#000;
display:block;
}

but it didn't work. can anyone help me out with this? i am not sure whether I have the CSS for the menu correct

Sometimes you have to add !important

not sure if that is a joke? if not, how would i insert it in to the css?

on the guardian website it has the following:

#zones-nav #global-nav ul li a {
border-right: 1px solid #BEBEBE;

can this help if this is amended?

Please help, i have looked in a book that i have and i think it can be resolved with CSS use of 'border' and leaving out or keeping the values of top and bottom at 0 so that the sides remain.

BUT, how do i edit the CSS of the PAGE and CATEGORY menus? I have been trying to add:

'border-width: 2px 1px 1px 2px;'

and it doesn't work. i guess this is because it needs to have something to refer to?

i have been locating code in the css stylesheet and amending it in the css insert section and it appears to be working.

i wanted to change the borders but i am struggling. i found this:

div#menu2 ul.rMenu-ver {
border-top: <?php echo $bfa_ata['anchor_border_cat_menu_bar']; ?>;
}

i can't work out the bit in the triangle brackets. is this now referring to something else which i need to find before i can edit the borders?

the best way to do this is use FireBug in firefox and examine the element, then you will see the CSS that is being applied. You can even dynamically change teh CSS to test things, then you will know waht to add to the css inserts.

cheers. have been using firebug to work out a few things.

i have got to this below, but i would like to reduce the height of the left and right borders so they are the same size as my menu items - any ideas?

}
div#menu2 ul.rMenu li a {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

without knowing the url of your site, there is no way to know