Archived

This topic is now archived and is closed to further replies.

  • 0

How To Center Nav Bar And Header

Question

Posted · Report post

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

12 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

cruisemarketupdate.com

Share this post


Link to post
Share on other sites

Posted · Report post

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/

Share this post


Link to post
Share on other sites

Posted · Report post

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)

Share this post


Link to post
Share on other sites

Posted · Report post

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; }

2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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?

Share this post


Link to post
Share on other sites