[SOLVED] Make page menu bar (almost) like Bytes for All
Hello!
I am trying to do something that I see has been accomplished on the Bytes for All site. I want my page menu bar to look like the BFA top menu bar, just "upside-down" - with the tabs looking like they're hanging off a border above them. I'm very close - here's what I have: http://timberglade.com/. The only problem is the border issue. Because I have ATO-->Page Menu Bar-->Border around all menu items set to solid-1px-#FFFFFF, it seems that's "bumping into" the bottom border of the header menu and the white is interfering with the black border. But if I change the Border Around All Menu items to any other color, it will border the entire page menu area, which isn't what I want - I want it to be all white. The images I've used for the menu item backgrounds have a black 1 px border around them (I thought that would help) but that can easily be changed if needed. Any ideas? Thanks! Atahualpa: 3.4.6 WP: 2.9.2 Currently in the CSS Insert area: /* ============================================ */ /* CSS for setting page menu style */ /* ============================================ */ div#menu1 ul.rMenu-hor li a:link, div#menu1 ul.rMenu-hor li a:visited, div#menu1 ul.rMenu-hor li a:active, div#menu1 ul.rMenu-hor li a:hover{ background: url(http://timberglade.com/wp-content/up.../MenuBack1.png) !important; margin-top: -2px; padding-top: 20px !important; border-left-width: 10px; width: 70px; text-align: center; font-size: 1.1em; } div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover { background: url(http://timberglade.com/wp-content/up.../MenuBack2.png) no-repeat !important; margin-top: -2px; padding-top: 20px !important; border-left-width: 10px; width: 70px; text-align: center; font-size: 1.1em; } |
1 Attachment(s)
Okay - I figured it out!
This will make your Page Menu bar "hang off" a line. See attached file for a screenshot. 1. ATO-->Style & Edit Header Area-->Logo Area Styling: border-bottom: solid 1px #000000; 2. ATO-->Page Menu Bar-->Border Around All Menu Items: solid 1px transparent 3. ATO-->Add HTML/CSS Inserts: Mainly I had to add "no-repeat" to the settings for link, visited, active. /* ============================================ */ /* CSS for setting page menu style */ /* ============================================ */ div#menu1 ul.rMenu-hor li a:link, div#menu1 ul.rMenu-hor li a:visited, div#menu1 ul.rMenu-hor li a:active{ background: url(http://YOURSITE.com/wp-content/uploads/IMAGE1.png) no-repeat !important; margin-top: -2px; margin-right: -1px; padding-top: 20px !important; border-left-width: 10px; width: 70px; text-align: center; font-size: 1.1em; } div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover { background: url(http://=YOURSITE.com/wp-content/uploads/IMAGE2.png) no-repeat !important; margin-top: -2px; padding-top: 20px !important; border-left-width: 10px; width: 70px; text-align: center; font-size: 1.1em; } |
All times are GMT -6. The time now is 06:48 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.