I found this menu bar on an atahualpa website.

http://blog.mengonline.com/

How do I replicate this for my site?

Thanks

Not sure what you mean. That is the standard atahualpa menus using some rounding of the menu items. What is your URL?

Hi

http://theweightlossdoctor.co.uk/blog

are you looking for the rounded tops?

yes. that's right.

add the following to ato->Add HTML/CSS Inserts->CSS Inserts

/* Menu Bars */

div#menu1 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #ccc;
box-shadow: 0 3px 10px #6663;
-moz-box-shadow: 0 10px 5px #666;
}

div#menu2 ul.rMenu {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 3px;
margin: 5px 0;
}
div#menu2 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #666;
box-shadow: 0 3px 10px #333;
-moz-box-shadow: 0 3px 10px #333;
}


/* Adjustments for the menu bars, which in their default 
state have 1px borders plus -1px margins to avoid 1+1=2px 
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;	
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/

Thanks Juggledad
I sent you a PM re: further work

The rounded CSS from above doesnt seem to work in the latest version 3.5.3. It rounds the corners top and bottom, btw. I am not going to hijack this thread but that's what entering the above CSS seems to do to the menus now. Can someone update the CSS to reflect the new version?

==================================================

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/

What browser are you using? Ie doesn't do rounding. The code is from 3.5.3

Juggledad, I am using Firefox, Wordpress 3.01, and Atahualpa 3.5.3, pretty much all new versions for each. I found the codes from previous older posts on rounding. I am not sure about the spacing between the menu tabs, to make them look like folder tabs, yet. It doesnt do it, compared to the website example from the original poster. When, I copy the code that you posted, the menu tabs are spaced apart, but they are also rounded on both the top and bottom.





This makes the menus rounded for both the top and the bottom:
---------------------------------------------------------------

div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/



This makes the menu buttons rounded on the bottom only:
------------------------------------------------------------

div#menu1,
div#menu1 ul.rMenu,
div#menu1 ul.rMenu li,
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}

So to round them only on the top, change 'bottom' to 'top' in the CSS.

Juggledad: You make it seem too easy. I spent a few hours searching and entering into the CSS section and came up empty handed. Yup, sure enough. Changing bottom to top, mostly did it. It also made the whole top menu bar curve though.




But, that's secondary right now. The last thing to tweak the menu buttons is to spread the page buttons apart. I've looked for padding in ATO/Header Area/Menu2/ but havent seen anything to deal with spacing apart the buttons, besides coloring them, etc. Is it somewhere else?

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 8px 10px;	
}
/* different padding for parents with arrow image */ 
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 8px 22px 8px 10px !important;
background-position: 97% 50% !important;
}
/* less padding for children with arrow image */ 
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 5px 22px 5px 10px !important;
background-position: 97% 50% !important;
}

Thanks Juggledad for all of today's help. It didn't work. But I am going to have to play with this next weekend. Got to write a paper. Maybe someone else with a new install can work on it this week. Thanks again.