Jump to content
Sign in to follow this  
jtunney

How To Center Nav Bar And Header

Recommended Posts

jtunney    0
jtunney

How do I center the nav bar and header.  The site is cruisemarketudpate.com

 

Thanks.

 

John

Share this post


Link to post
Share on other sites
catrina    103
catrina

You can use Custom CSS to do this and adjust the left margin. For further reference, please see the following links:

 

http://www.pagelines.com/wiki/Custom_CSS

http://www.w3schools.com/cssref/pr_margin-left.asp


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
jtunney    0
jtunney

Sorry, but that doesn't help.  I've tried several options.  What is the css for the nav bar?

 

John

Share this post


Link to post
Share on other sites
catrina    103
catrina

I tried viewing your site but it's not loading (probably a misspelling in the URL?). Can you please repost it?


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
batman    389
batman

Hi

 

For the NavBar you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

#brandnav .brandnav-nav {

    float: none;

    margin-left: auto;

    margin-right: auto;}

 

It is advisable to learn how to do this on your own too.  

Check out http://www.pagelines.com/wiki/Custom_CSS

 

 

For the header if you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

http://www.w3schools.com/


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi, Add the following and this should center your navigation.

#site .navigation_wrap .main_nav { margin-right: 0; }
#site .main_nav ul { text-align: center; float: none; }
#site .main_nav ul > li { float: none; display: inline-block; }

  • Like 2

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

the code works but now it is not responsive anymore and overlaps any elements below the nav bar when viewed on mobile devices. Is there a fix for that?

 

See here: http://BronwynSherman.com

 

Thanks

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

You pretty much have to choose one or the other. The code used to center it will remove the responsiveness.

 

However, I do not even see the custom CSS added to your site's code. Where did you add it? (More info on this)


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
yemoonyah+    2
yemoonyah

Thanks. I used the Sexy Snips plugin on this site and the above code on another site. Was trying to find a solution for either one and then use it on both.

Share this post


Link to post
Share on other sites
James B    436
James B

You could try using the mobile menu plugin as a solution for the navigation. Have you spoken to the author of sexy snips to see if there's an update for the product which will prevent this?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

I can't get a hold of Nick. The contact info on the plugin page is wrong and there is no way to contact him on his own site.

 

However, I found a solution (change % to fit your needs):

 

#nav .content-pad, #secondnav .content-pad {
padding-left: 16%;
}

Share this post


Link to post
Share on other sites
Rob    547
Rob

If you wish to contact Nick, please post a question on his product page in the comments area.  He's usually pretty good at replying there.  His email changed and should be contacted via his product pages in the comments only.


Former PageLines Moderator, Food Expert and Raconteur

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  

×