Jump to content
Sign in to follow this  
yuthomas

Navigation bar image across the layout

Recommended Posts

yuthomas

Hi, I've just put some custom CSS rules in Custom Code section of the setting. Things look ok except that there seems to be a white underline that shows up below the blue image tile to the right of "Blog" menu. I searched the current forum but I can't seem to find a way to get rid of it. You can view the site for your reference here: http://bigfattunafish.com/ Also, the CSS codes that I've put in are as follows. Please help! Would much appreciate it ----------------- .main_nav ul li { background: url('http://bigfattunafish.com/wp-content/uploads/2012/02/whitehouse-menu-bar.gif'); } .main_nav li a { color: #FFFFFF; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: #36648B; color: #FFFFFF } .navigation_wrap { border-bottom: 0 none !important; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: #F0F0F0 !important; color: #104E8B; } #nav_row { background: url('http://bigfattunafish.com/wp-content/uploads/2012/02/whitehouse-menu-bar.gif') !important; }

Share this post


Link to post
Share on other sites
Danny
Hi, It was simply that your image dimensions were slightly incorrect, add this to your custom code and it should fix the issue. [code].navigation_wrap .main_nav { height: 33px !important; /* Changed from 31px */ }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
yuthomas
Danny, thanks so much for the tip - it worked! Amazing. Not sure if it's ok to ask a follow up question here or need to create another post: I've been also trying to figure out a way to modify/add a code so that when I hover over a menu that has child sub-menus, both the main menu and the sub-menus light up and stay in the same color. e.g. (In my site http://bigfattunafish.com/) When you hover over "Sample Page", I would like both "Sample Page" and its sub-menus ("Test 1" and "Test 2") to light up in light grey with blue font and stay that way while you hover up and down the main and submenus. Loose example here: http://www.whitehouse.gov/ Currently only the one (regardless the main menu or sub-menu) that your mouse cursor is on lights up in light grey while the rest stays in different colors (dark blue or light blue depending on whether you are on that page or not). I would be very grateful if you can help me with this one as well! Thanks again. Regards,

Share this post


Link to post
Share on other sites
Danny
Hi Thomas, Would it be possible for you to create a new topic regarding your follow up question please. It just so that its easier for users to search for it in the future. Thanks

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×