Jump to content
Sign in to follow this  
nbenson

Centering a navigation bar

Recommended Posts

nbenson

I have disabled the search field of a sites navigation bar and now I'm not liking the gap that I'm left with. I would like to center all the pages in the navigation bar so everything is balanced a little better. I didn't see any function to do this built into Pagelines itself, would anyone be able to explain how I could do that? Thanks!

Share this post


Link to post
Share on other sites
cmunns

You would center the main nav with some CSS like this ` #nav_row, .center { float:left; width:100%!important; overflow:hidden; position:relative; } #nav_row ul, .center ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; width:auto!important; } #nav_row ul li, .center ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } `

Share this post


Link to post
Share on other sites
nbenson

Thanks Adam! Worked like a charm, the only thing is the dropdowns are still justified to the left.

Share this post


Link to post
Share on other sites
nbenson

Preferably centered under their parent page.

Share this post


Link to post
Share on other sites
cmunns

that's bc they are positioned absolutely ....what is your link?

Share this post


Link to post
Share on other sites
nbenson

I'm sorry Catrina, but that code didn't center any of the sub menu's.

Share this post


Link to post
Share on other sites
Kate

Hey Nate, We're going to have to do a couple things to fix this up. First, please take out this line "overflow:hidden;" from the following:

#nav_row, .center {
		float:left;
	   	width:100%!important;
	   	overflow:hidden;//Take this out
	   	position:relative;
		}
Next, we'll have to override the styles being set for the main nav:
#nav_row ul ul{
	clear:none !important;
	float:none !important;
	left:-55px !important;
	width:250px !important;
	position:absolute !important;
	top:32px;
	}
	#nav_row ul li li{
	right:0px !important;
	text-align:center;
	}

Share this post


Link to post
Share on other sites
devaldivia
Hi all, I'm having the same issue, and the CSS above doesn't work for me :( Is there another way to do this in Framework 2.1.4 ? or is it still bespoke CSS? site is: londontangodotinfo I've removed the custom CSS upon last save so I don't clutter up Firebug. Thank You!

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  

×