Jump to content
Sign in to follow this  
tunatraffic

Navigation Border Right

Recommended Posts

tunatraffic

Hi Guys and Gals! I ams stumped on this one. How can I add a thin border to the navigation menu such like bgr.com? The site i am working on is goalsettingspeakers.com. Mike There is a lot of custom css: body { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif !important; font-size: 11pt !important; line-height: 11pt; } #header .content-pad { padding:0px !important;} #header .branding_wrap { width:980px !important; } #primary-nav {background-color: #9D221E;} #branding {background-color: #ffae25;} #primary-nav ul.sf-menu a { color: #FFFFFF !important ; font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 18px !important ; line-height: 18px; font-weight: 500; border-color: none; padding-left: 10px !important ; padding-right: 10px !important ; text-transform: none; background-color:#9D221E; text-shadow: 0px 0px 0px 0px; border-width: 0px 0px 0px 0px !important ; } #primary-nav ul.sf-menu a:hover { color: #ffffff; font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important ; font-size: 18px !important ; line-height: 18px; font-weight: 500; padding-left: 10px !important ; padding-right: 10px !important ; text-decoration:underline; background-color: #8c1e1b !important ; text-shadow: 0px 0px 0px 0px ; border-style: solid !important ; border-width: 0px 0px 0px 0px !important ; border-color: #000000 !important ; } #primary-nav .main-nav ul.sub-menu li a { color: #FFFFFF !important ; font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 14px !important ; line-height: 14px; font-weight: 500; border-color: none; padding-top: 5px !important ; padding-left: 5px !important ; padding-right: 5px !important ; padding-bottom: 5px !important ; text-transform: none; background-color:#9D221E; text-shadow: 0px 0px 0px 0px; border-width: 0px 0px 0px 0px !important ; } #primary-nav .main-nav ul.sub-menu li a:hover { color: #ffffff; font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important ; font-size: 14px !important ; line-height: 14px; font-weight: 500; padding-top: 5px !important ; padding-left: 5px !important ; padding-right: 5px !important ; padding-bottom: 5px !important ; text-decoration:underline; background-color: #8c1e1b !important ; text-shadow: 0px 0px 0px 0px ; border-style: solid !important ; border-width: 0px 0px 0px 0px !important ; border-color: #000000 !important ; } #nav_row { width:100%; margin-left: auto !important ; margin-right: auto !important ; padding-left: 0px; padding-right: 0px; background-color: #9D221E !important; text-transform: none; line-height: 20px; height: 35px; margin-left:-10px !important ; border-bottom: 0px solid #000000 !important; } #menu-header { width:100%; margin-left: auto !important ; margin-right: auto !important ; padding-left: 0px; padding-right: 0px; background-color: #9D221E !important; text-transform: none; line-height: 20px; border-style: solid !important ; border-color: #000000; } #primary-nav.container.fix {border-style: solid !important ; border-width: 4px 0px 0px 0px !important ; border-color: #000000; background-color:#9D221E !important; } #page-main.container-group.fix {border-style: solid !important ; border-width: 4px 0px 0px 0px !important ; border-color: #000000; } #footer {border-style: ridge !important ; border-width: 4px 0px 0px 0px !important ; border-color: #FFFFFF; } h1 { font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 28px; text-transform: none; } h2 { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 24px; text-transform: none; } h2 em { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; text-transform: none; } h3 { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 18px; text-transform: none; } h4 { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 16px; text-transform: none; } h5 { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 14px; text-transform: none; } h6 { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 14px; text-transform: none; } .breadcrumb { font-family: ???Palatino Linotype??™,'Trebuchet MS',serif; !important; font-size: 14px; text-transform: none; color: #000000 !important ; text-shadow: 0px 0px 0px 0px ; } .entry_content { background-color: #ffffff; border-style: groove !important ; border-width: 2px !important ; border-color: #000000 !important ; padding-left: 15px !important ; padding-right: 15px !important ; padding-top: 15px !important ; padding-bottom: 15px !important ; } .post-excerpt { padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 15px; background-position: 0px 0px ; background-repeat:repeat-y ; } #newssignup { font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 12px; text-transform: none; text-align: center ; } #newsprivacy { font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 10px; text-transform: none; text-align: center ; } .widget-title { font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif !important; font-size: 16px; text-transform: none; font-weight: 500; } .titlehome { border-style: solid !important ; border-width: 1px 1px 1px 1px !important ; border-color: #000000 !important ; text-transform: none; font-style:normal; text-align: center; } .hentry blockquote { border-style: solid !important ; border-width: 1px 1px 1px 1px !important ; border-color: #000000 !important ; text-transform: none; font-style:normal; padding-left: 10px !important ; padding-right: 10px !important ; padding-top: 10px !important ; padding-bottom: 10px !important ; }

Share this post


Link to post
Share on other sites
catrina

Just to clarify: what part of the navigation menu (at bgr.com) do you want to replicate? (This'll ensure that I don't give you the wrong code to use...)


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
tunatraffic

I want to add the white "|" home in the main navi that contains the home, topics, gallery, etc. Mike

Share this post


Link to post
Share on other sites
catrina

Add this code to your custom CSS area:

ul.main-nav li.page_item {border-right: 1px solid #ffffff;}


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
tunatraffic

That didnt work. It only ads a border right when you select that page. Mike

Share this post


Link to post
Share on other sites
kastelic

Well this wasn't easy but I think I've got what you need here ;)

#primary-nav ul.sf-menu a {
	border-right: 1px solid #999 !important;
	height: 5px;
	line-height: 5px;
	padding-top: 9px;
	}
	ul.sf-menu li {
	background: #9D221D;
	}

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  

×