Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

I like this menu bar. How do I get it for my website?


  #1  
Old Oct 31, 2010, 11:02 AM
DrK
 
4 posts · Oct 2010
I found this menu bar on an atahualpa website.

http://blog.mengonline.com/

How do I replicate this for my site?

Thanks
  #2  
Old Oct 31, 2010, 11:40 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Not sure what you mean. That is the standard atahualpa menus using some rounding of the menu items. What is your URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 31, 2010, 05:23 PM
DrK
 
4 posts · Oct 2010
Hi

http://theweightlossdoctor.co.uk/blog
  #4  
Old Oct 31, 2010, 06:08 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
are you looking for the rounded tops?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 1, 2010, 04:20 AM
DrK
 
4 posts · Oct 2010
yes. that's right.
  #6  
Old Nov 1, 2010, 05:28 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
add the following to ato->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
/* 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;
}
*/
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Nov 2, 2010, 04:48 PM
DrK
 
4 posts · Oct 2010
Thanks Juggledad
I sent you a PM re: further work
  #8  
Old Nov 15, 2010, 02:24 AM
runnyeggsham
 
9 posts · Nov 2010
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;
}
*/
  #9  
Old Nov 15, 2010, 04:23 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What browser are you using? Ie doesn't do rounding. The code is from 3.5.3
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 15, 2010, 01:13 PM
runnyeggsham
 
9 posts · Nov 2010
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;
}
  #11  
Old Nov 15, 2010, 04:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
So to round them only on the top, change 'bottom' to 'top' in the CSS.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Nov 15, 2010, 05:55 PM
runnyeggsham
 
9 posts · Nov 2010
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?
  #13  
Old Nov 15, 2010, 06:12 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HTML Code:
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Nov 15, 2010, 11:16 PM
runnyeggsham
 
9 posts · Nov 2010
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
want the website to not reload the categories and pages menu vishvadeep Header configuration & styling 2 Jan 23, 2011 06:14 PM
How to make page menu bar extend across website frugalmommytoday Page & Category Menu Bars 2 Oct 11, 2010 08:28 PM
Page Menu Bar items link to another website. Briggsm8 Page & Category Menu Bars 1 Sep 23, 2010 06:28 PM
[SOLVED] Hard code a single page menu link to an existing (non-wordpress) website jms5017 Page & Category Menu Bars 4 Aug 3, 2010 04:45 AM
[SOLVED] How to have a full-screen bottom bar with fixed-width website FineDesigns Header configuration & styling 1 Jul 7, 2010 01:15 PM


All times are GMT -6. The time now is 04:56 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.