Jump to content
Sign in to follow this  
mxhg

Change Header Navigation Background

Recommended Posts

mxhg

Dear Pagelines Team: This is my Platform Pro Website: http://www.deinterrarium.de/ I'm missing two features: You see the header navigation: 1. When your mouse over "Prepage" or any other header navigation the background will be changed to grey. It's not customizable in the theme settings. This seriously sucks. Please make an update where it is possible to change the color inside the themes options. Please develop an update to fix this problem or tell me how to change with custom CSS. 2. I would like to set the navigation background color to orange and the "Prepage" in white. And the other header navigation links in orange. I photoshoped this picture: header.jpg Problem here: there is only one css class for both. If I change the color of "Prepage" - the color of "12 Tipps f??r deinen Terrarienbau" "Impressum" will also change. Also: Please add this feature in an update. I think this will help lots of users. If you won't make an update now please tell me how I can achieve the desired design change with custom css code. regards Max

Share this post


Link to post
Share on other sites
catrina
What do you want the background color to change to [b]on mouse-over for the navigation items with orange text[/b]? Do you want visitors to mouse over and see white text on orange background? Also, do you want "Prepage" to be in orange text with white background on mouse-over or do you want it to remain with white text on orange background?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mxhg
Dear Catrina, thanks for offering your help! My answers to your questions: [quote]?»What do you want the background color to change to on mouse-over for the navigation items with orange text??«[/quote] I want the navigation items for on mouse over to be: white text on orange background. [quote]?»Do you want visitors to mouse over and see white text on orange background??« [/quote] Yes. [quote]?»Also, do you want "Prepage" to be in orange text with white background on mouse-over or do you want it to remain with white text on orange background??«[/quote] I want it to remain white text on orange background. cheers Max

Share this post


Link to post
Share on other sites
tranceandy
Have you looked at this topic? I think it shows you what you are after. http://www.pagelines.com/forum/discussion/14766/most-commonly-asked-css-tweaks-for-platformpro#Item_27

Share this post


Link to post
Share on other sites
Jenny
Hi Max. Since you are using PlatformPro, try using [url="http://dl.dropbox.com/u/29858470/platform_nav_example.php.zip"]this plugin[/url]. It will not work with 2.0 so if anyone is reading this, don't even try it. ;) The admin will show up within your PlatformPro admin.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
mxhg
Andy, thanks for the link to this topic. I used two of those css parts. Looks better now. Only one thing still does not work: The hover of the navigation link is still black. I don't know why. I want them to be white. This is now in my custom CSS [code]body{} /* CSS FOR WHEN HOVERING OVER A MENU ITEM */ .main_nav .main-nav li a:hover, #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover { background-color: #ff7100; color: #ffffff; } /* CSS FOR CURRENT PAGE MENU ITEM */ .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.sf-menu li li { background-color: #ff7100; color: #ffffff; } [/code] cheers!

Share this post


Link to post
Share on other sites
tranceandy
Using firebug and looking at your CSS in the Style.css this is what is causing it to be black when on hover. [code]#page, .tcolor1, #subnav ul li a:active, .commentlist cite a, #breadcrumb a, .metabar a:hover, .post-nav a:hover, .post-footer a, #buddypress-page #object-nav ul li a, #buddypress-page table.forum .td-title a, #buddypress-page #subnav a:hover, #buddypress-page #subnav li.current a, #twitterbar a, #carousel .carousel_text, #site #dsq-content .dsq-request-user-info td a, #pagination .wp-pagenavi a:hover, #pagination .wp-pagenavi .current, #primary-nav .main-nav li a:hover, #featurenav a.activeSlide, .content-pagination a:hover .cp-num { color: #000000; }[/code]You need to remove the following from the above[code]#primary-nav .main-nav li a:hover, [/code]

Share this post


Link to post
Share on other sites
tranceandy
I should have said add the following in the theme settings or in the Base child theme as required as it isn't a good idea to edit the main style.css file :) [code] .main-nav li a:hover { color: #FFF !important; } [/code]

Share this post


Link to post
Share on other sites
mxhg
Thanks Andy! It looks perfect now!

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  

×