Jump to content
Sign in to follow this  
givevo5

Insert Image for Navbar-Change Navbar color

Recommended Posts

givevo5

Hey Guys I am using platformpro and am having a heck of a time trying to customize the main navbar for the entire website. I would like to change the background color to red, text to black and hover over to white. I have little CSS experience and have been inserting some of the examples from the forum into the custom CSS section, but little seems to change. After I tried one of the examples and then removed it, it ended up changing the spacing of the tabs. As you can see each of the individual sports used to be right under their respective ball icons: website: www.comebackseattle.com Can you provide me with the CSS code and exactly where I need to insert it to make this color/ hover changes and fix the spacing problem? Thanks again for your help and I look forward to hearing from you soon!

Share this post


Link to post
Share on other sites
catrina
What CSS do you have in your Custom Code right now? What code did you use that ended up changing the spacing? (I'm looking at the site and the tabs are appearing right under the right ball icons in Firefox for Mac) For now, here is code you should for changing the colors: [code]div.main_nav li.menu-item {color: #000; background-color: #FF0000;} div.main_nav li.menu-item a:hover {color: #000; background-color: #FFFFFF;} [/code]

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
givevo5
Hey Catrina, Thanks for the response. The alignment is still coming up far off in chrome and internet explorer. Here is the code that I currently have in there: body{} #header{background:#fff url('http://comebackseattle.com/wp-content/uploads/2011/11/HEADER-MIDDLE1.jpg')} div.main_nav li.menu-item {color: #000; background-color: #FF0000;} div.main_nav li.menu-item a:hover {color: #000; background-color: #FFFFFF;} I inserted and now see the colors change. Is there a way to make sure that these dropdowns are spaced more or less evenly in most browsers? Would it be easier to simply create an image with the proper px length and then insert that in? I was able to do this with the header, but didn't know where I could put this separately for the main and nav and what the px dimensions were? Thanks for your help!

Share this post


Link to post
Share on other sites
Danny
Can you explain what you mean please. As I have looked at your site in the following browsers Firefox, Chrome, Safari and IE and I can't what is different with the dropdown menu?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
givevo5
Hey Danny, The names of the sports for example where centered under their respective ball. For instance. "Flag Football" tab was centered right underneath the Football icon. Can you provide me with CSS code I would into the custom code section so that I can insert a custom menu bar as I did with the header. If I knew the px dimensions for this I could create one to those specs and then work to insert in place of the existing menu that you can see if way off center. Let me know if this clarifies the question. Thanks and I look forward to hearing from you soon.

Share this post


Link to post
Share on other sites
Jenny
This will get you started. Just add the following to your custom code -> custom CSS box. [code].main-nav { margin-left: 50px !important; }[/code] However, to tweak it any further, you will need to remove the arrows on the drop down menus (I believe that's in the Header and Footer settings). If you don't want to do that, then you will have to edit the image to space it out better.

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
givevo5
Thanks for the tip on alignment. Does any one have guidance on the css code to insert a jpeg for the navbar so I can change the mess that I currently have displaying on the navbar? www.comebackseattle.com

Share this post


Link to post
Share on other sites
Jenny
Ahh.. I see the image is a background image. That's not easy to work with. Like I said above, I highly recommend removing the drop down arrows on navigation. They aren't really needed and once they're gone, we can further customize the menu with CSS.

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

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  

×