• 0
Sign in to follow this  
Followers 0

customise nav

Question

Posted · Report post

I'd like to change my main nab in the following ways but can't wrk out how to do it: 1. I'd like the nav centred 2. I'd like the nav in capitals 3. I'd like to close up the vertical space between the two lines of nav links I'd be very grateful if someone could help me with this. Thanks

Share this post


Link to post
Share on other sites

26 answers to this question

  • 0

Posted · Report post

Hi, 1. View this post - http://www.pagelines.com/forum/discussion/comment/99092#Comment_99092 2. To have the nav in capitals add this to your custom CSS: [code].main_nav li a {text-transform: uppercase;}[/code] 3. Add this to your custom CSS: [code].main_nav li a {padding: 0px 10px;}[/code] Please keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting [url="http://www.pagelines.com/pros/"]our Pros page[/url]. Common CSS Tweaks http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1 http://www.pagelines.com/forum/discussion/16222/common-questions-and-customizations#Item_2

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Danny. Like other forum users, I find Firebug quite easy to use with other themes but for some reason with Pagelines it's hellishly difficult to identify the CSS which controls simple layout stuff like centering the main nav (the code you gave me makes no difference, alas). I'v trawled through the discussions to find a solution to this but to no avail. This coding you sent me to sends my nav crazy: http://www.pagelines.com/forum/discussion/comment/99092#Comment_99092

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'd really appreciate help with this: as you can see the navigation links on this site are crying out to be centred on the page. I've literally spent 2.5 hrs going through all the suggested solutions to this on the forums - but none of them work. http://77.72.201.176/~lizretti/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The code on that link is outdated a bit. You will need to alter it in order to make it work. information Danny provided above has a link on how to use Firebug. I highly recommend watching the video, especially since you're already familiar with PageLines.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've watched the Firebug video about 10 times.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I believe you think I just post on here to get you to do my work for me: I don't. I trawl through all the other forum posts and test the suggested solutions; I try to identify the relevant code by using Firebug. Is there not one simple solution to getting the main nav to centre? It seems like there are dozens of suggestions - and unfortunately none of them work for me.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To center your menu, go to Dashboard > PageLines > Store > Plugins > Top Free and download then activate [b]Sexy Snips[/b]. It will help you by providing the code to center your menu.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

already done that, installed it and copied the code. It makes no difference.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That could be the result of the top tier being almost full width already. Have you considered simply restructuring your menu to use Drop Down Nav? I think it would be much easier on your visitors as well as the menu's a bit busy. On a side note, using "Reject" is actually bad Netiquette and will not help to get you faster or better results. Please refrain from using it. Once answered by either party, the topic remains open until one of us clicks "Accept". The Reject button is intended to be used only when an answer is actually incorrect.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The normal process for centering the Nav menu is to add margin to both sides, essentially pushing the menu to the middle. Because your menu wraps, this is ineffective as that process only works on the first line. The second will continue to wrap. While it will wrap in line with the left margin, it will still be flush left and not centered. This is why I'm strongly recommending use of Drop Down navigation. By using Drop Down, you can get the menu on one line, then actually apply the centering technique successfully.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not possible, I'm afraid. There aren't enough generic nav categories. Any other solutions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Odd. My site has nine distinct sections, dozens of sub-sections, hundreds of categories in each of at least three sections, and posts ranging into the tens of thousands and yet I've managed to do it. In fact, one of my sections has 19,926 posts, 72 categories, 2,681 tags and still fits into one primary menu item with drop downs. Have you considered reorganizing so that you have a shortened primary menu (centered) and below it, each primary has a Secondary specific to that, rather than a drop down? WordPress lets you apply a secondary menu (you may have as many as you please to create) to specific pages or posts. Then, if someone went to "My Books", you could have a secondary list of links in a horizontal line below the main nav. If that doesn't work, perhaps something like UberMenu might help. http://wpmegamenu.com/ Additionally, there are many ways to handle menus. You can see the myriad of choices here: http://www.cssplay.co.uk/menus/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Unfortunately I have to follow the wishes of my client in this respect. I find it almost impossible to believe that PageLines doesn't allow for a two-line menu to be centred. Very odd indeed!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there! It's definitely possible with some css. This is the css for centering the nav menu, as found in the sexy snips plugin. I've tested this on your site, and seems to center the navigation. http://screencast.com/t/cMNw5NAVq If you copy and paste that's in that snip for centering your menu, into Custom CSS, it will work. Let us know how it goes. Nick

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry - no CSS included in your post...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry for the confusion. If you copy and paste what' in the Sexy CSS snip, into your Custom CSS area, the navigation will be centered. The screenshot was showing what the CSS does.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You mean this, right? @import url(http://77.72.201.176/~lizretti/wp-content/plugins/sexy-snips/css/center-nav.css);

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jus added it to my custom code, yet it makes no difference: body{} #branding .content-pad {padding: 0px 0 0 0!important;} #cred.pagelines { display: none; } #content .content-pad { background: url(http://77.72.201.176/~lizretti/wp-content/uploads/2012/06/background1.jpg) bottom center no-repeat; } .fpost {border:0} h1 { color: #507e75;font-weight: normal; } p { color: #666; font-size: 13px; line-height: 19px; margin:.5em 0 .5em 0} .main_nav li a { font-family: 'Antic', cursive; } #nav ul li a{text-transform:uppercase} #footer ul { color: #999999; font-size: .3em; margin-bottom: 0.5em; } #nav ul li a {padding:5px 10px 5px 5px;} ul.sf-menu ul.sub-menu, ul.sf-menu ul.children{top:23px;} .main_nav li a {padding: 0px 10px;} [b]@import url(http://77.72.201.176/~lizretti/wp-content/plugins/sexy-snips/css/center-nav.css);[/b]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes that is correct. I copied, and pasted that into your style.css, in browser, and it centered the navigation instantly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Add it to the top of your custom CSS box.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm looking on Google Chrome, Safari, Firefox -all Mac and the nav is ranged left :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Adding it to the top of the custom box worked!!!!! Hurrahhhhh!!!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Place the import statement, at the very top of your custom css box, and your navigation will be centered. http://screencast.com/t/GCHOFe0zQE

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

THANKS!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad that's resolved.

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