Jump to content


Photo
- - - - -

customise nav


  • Please log in to reply
26 replies to this topic

#1 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 10:48 AM

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

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 June 2012 - 12:37 PM

Hi,

1. View this post -

Please Login or Register to see this Hidden Content



2. To have the nav in capitals add this to your custom CSS:

Please Login or Register to see this Hidden Content


3. Add this to your custom CSS:

Please Login or Register to see this Hidden Content


Please keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

for more info. Also please be sure to watch our Firebug video tutorial

Please Login or Register to see this Hidden Content

.

If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting

Please Login or Register to see this Hidden Content

.

Common CSS Tweaks

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



#3 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 01:27 PM

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:

Please Login or Register to see this Hidden Content



#4 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 02:59 PM

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.

Please Login or Register to see this Hidden Content



#5 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 11 June 2012 - 03:04 PM

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.

#6 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 03:07 PM

I've watched the Firebug video about 10 times.

#7 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 03:10 PM

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.

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2012 - 07:01 PM

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

#9 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 07:11 PM

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

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2012 - 07:22 PM

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.

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2012 - 07:26 PM

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.

#12 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 07:29 PM

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

#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2012 - 07:42 PM

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.

Please Login or Register to see this Hidden Content

Additionally, there are many ways to handle menus. You can see the myriad of choices here:

Please Login or Register to see this Hidden Content



#14 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 07:51 PM

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!

#15 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:05 PM

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.

Please Login or Register to see this Hidden Content

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

#16 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:10 PM

Sorry - no CSS included in your post...

#17 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:14 PM

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.

#18 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:18 PM

You mean this, right? @import url(

Please Login or Register to see this Hidden Content

);

#19 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:19 PM

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(

Please Login or Register to see this Hidden Content

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

@import url(

Please Login or Register to see this Hidden Content

);


#20 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 11 June 2012 - 08:20 PM

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