Navigation Bar Customization

[timothy 0]

Hello Guys, My name is Timothy, I just got the Platform Pro theme. I want to find 3 specific solutions, if you'll be so kind to help me out. - Make my navigation bar black - Alter the spacing so my login button has noticeable room between it and the previous link-button - Add my logo to the nav bar To see examples of what I'm after, look at Pagelines.com, which coincidentally has a very close look to what I'm after. It's like what Facebook and Twitter are also doing. Please let me know how to do this. Thanks a lot. Be Well, Timothy

[cshoffmann 0]

In the Platform Pro Settings>Template Setup>Site Header drag the boxes off and replace the with the Brandnav Section box only. Now style your navigation menu by using different parts that need changing from the css code (use the inspect element tool in a Google Chrome browser or Firebug in Moz browsers) and you may test your changes in the tool. Once you have what you want to change the copy and paste in the custom code section of PP Settings or in the base.css file.

[timothy 0]

Hey Shaun, Firstly, let me say thank you for taking the time to reply. Although I must say... I got Firebug, and to a trained coder, it may make a lot of sense, but I'm fighting to understand what I'm seeing. I can't find where I can edit and preview my changes in Firebug (v1.6, because I use Firefox v.1.6, because my Mac is not new) Please pretend you're talking to a kindergartner, that's what will help me. LOL I feel like this tweak is minor enough that I don't need a custom job... but large enough that you probably don't feel like typing it out for me.

[catrina 103]

Below is the CSS for each of the tasks you want to accomplish... Making Your Navigation Bar Black

#primary-nav {background-color: #000;}

Alter the spacing so my login button has noticeable room between it and the previous link-button

What elements are you referring to (where are these located)? Adding Logo To Navigation Bar Where do you want the logo to be located? For more help on using Firebug to customize your site, you can view this tutorial: http://www.pagelines.com/forum/topic.php?id=6930

[timothy 0]

Hello Catrina, I placed your code into the Custom CSS: CSS Rules field on the theme Settings page, and the nav bar background color has remained the same. The nav bar is a custom menu, could that be stopping it from working? Secondly, here is the set up of my Nav bar right now: Logo - Page1 - Page2 - Page3 I want to create spacing between Logo and Page 1, and spacing between Page 2 and Page 3. Then finally I just want to change the font of the nav bar. Would you mind helping me doing that? My URL is: mymedicalmiracle.com

[kastelic 6]

	#menu-item-1181 {
	margin-left: 100px;
	}
	
	.main_nav .main-nav li a {
	background: #222;
	}
	
	.main_nav .main-nav li a:hover {
	background:#555;
	}

In addition, use font family to change the fonts for the anchor tags just like above and you'll need to make your page wider if you want to put more space between the nav and the logo, and then you can either use float:right for the navbar or try margin-left.

[timothy 0]

Hey Jimmy, Thanks for the help. I removed a link from my nav bar. So now it's simply: Logo - Page 1 - Page 2 And I want to have my logo aligned far left, and my two pages aligned far right, just like Youtube. Here's what I tested: .main_nav .main-nav li a { margin-right; } and .main_nav .main-nav li a { margin-right; } And neither accomplished the task. How should I approach this? Again, my URL is: mymedicalmiracle.com And do you have any idea how to add a horizontal rule just beneath the menu, like Youtube?

[catrina 103]

To add a horizontal rule below your logo and navigation, add this CSS:

#brandnav {border-bottom: 1px solid #000000;}

Replace #000000 with the color of your choice.

[timothy 0]

Thanks Catrina, Adding the horizontal rule worked. My grand opening of the site starts in a few days... please, either of you help me align the two pages in the navigation bar to the far right. URL: mymedicalmiracle.com I'll give you both huge karma. Timothy

[timlinson 3]

this should do it: `#brandnav .main_nav ul.main-nav { float:right; }`

[timothy 0]

Hey Tim, Maybe I didn't place it right, because it didn't work. I put the snippet at the very bottom of the code in the style.css file. And then I tested it in the Custom CSS, CSS Rules field. Should I place it elsewhere?

[timlinson 3]

custom code > custom css is the better option because it won't be overwritten by updates. It works on my end, so I'm not sure what's wrong.. maybe try it with !important added: `#brandnav .main_nav ul.main-nav { float:right !important; }`

[timothy 0]

YES YES YES!!! LOL Thank you so much Tim, Jimmy, and Catrina.