Jump to content


Photo

Aligning 2Nd Nav Bar To Centre

nav bar align centre secondary nav bar

  • Please log in to reply
17 replies to this topic

#1 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 01 November 2012 - 03:25 PM

Hi

I was wondering if it is possible to align one specific secondary nav bar to the centre? Presumably, if it is possible, I would need some CSS code. Can anyone help? The name of the menu is VILLA JASAMIN

http://www.insidemani.gr/villajasamin/


Thanks

#2 Rob

Rob

    One Smart Egg

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

Posted 02 November 2012 - 12:46 AM

Hello Groves,

Each menu item you create can have it's own CSS class. Simply go to Dashboard > Appearance > Menus and on the top, right side, click "Screen Options". When a new panel opens, you'll see a check box for CSS Classes. Check it then click "Screen Options" again.

Now, on each menu item, there's a new field where you can enter the new, unique CSS class. Make sure it's something totally unique.

Then, you can assign a margin-left and margin-right or margin:auto; to those unique elements, creating the centered effect only for those menu items.

#3 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 November 2012 - 08:35 AM

Hi
I followed your instructions but the CSS field did not appear. Any other ideas? By the way, I should have said that I am not a developer and so would also appreciate advice on what CSS code i should enter if we can solve the problem of the field not appearing.

Thanks again

Groves

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 November 2012 - 02:49 PM

Hello Groves,

What CSS classes did you enter?

#5 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 05 November 2012 - 01:45 PM

Hi Catrina
I didn't use any CSS classes as the new field for entering CSS classes did not appear on my menu settings page, having followed the instructions from my first reply. Could I enter this CSS code anywhere else? And if so, what code should I use? All i want to do is to centre align 1 particular menu.

Thanks

groves

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 November 2012 - 06:17 PM

To avoid confusion, are you referring to CUSTOM fields in posts or CSS?

#7 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 06 November 2012 - 02:47 PM

Catrina

CSS (I think). To retrace; I want to align centre 1 specific secondary navigation bar. I went to APPEARANCE- MENUS- SCREEN OPTIONS and checked the CSS classes box. BUT, the new field allowing me to add new CSS classes did not appear (and in any case, I would not know what to input). This is my problem. i don't know what CSS code to input and I don't know where to put it anyway!

I hope this clears things up,

Regards

Groves

#8 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 06 November 2012 - 05:54 PM

See if just adding <center>YOURMENUITEM</center> in the menu item name will work.

#9 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 07 November 2012 - 11:14 AM

Jenny

Thanks for that but sadly it didn't work. Can I not add some CSS in the Platform Pro settings? If so, what should I input? Or, any other ideas? Do you have any idea why I do not get a CSS field on my menu settings page, even though I checked the correct box in screen options?

Groves

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 November 2012 - 03:47 PM

I moved to your topic to the PlatformPro category since you're using PlatformPro.

The CSS would need to go into PlatformPro settings > Custom Code > Custom CSS, but if you're trying to add a CSS class to your menu items, can you please post a screenshot of your Appearance > Menus screen?

#11 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 08 November 2012 - 04:53 PM

Ah, hang on a minute Catrina! Sorry, was looking in the wrong place. Each item in the specific menu i want to have centred has a CSS Classes box. What should I input here? And do I have to repeat this for each item in the menu?

I wasn't allowed to paste my screenshot.


Groves

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 08 November 2012 - 04:55 PM

To clarify: So you would to align the link in each menu item so that it's centered?

#13 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 09 November 2012 - 09:42 AM

To clarify, I want the whole nav bar centered, not aligned left as is the default setting.

Groves

#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 November 2012 - 03:11 PM

I have just tried loading your site but it is showing up as a blank page: http://www.insideman.../villajasamin/. Are you seeing this too?

#15 groves

groves

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 10 November 2012 - 09:33 AM

Catrina

My site crashed yesterday due to a plugin I insalled. It's OK now

http://www.insidemani.gr/villajasamin/


Groves

#16 Rob

Rob

    One Smart Egg

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

Posted 10 November 2012 - 06:17 PM

Groves, there are two files attached here. The first shows you where you have to go and what to click. The second shows you the result.

This is WordPress, not PageLines, so it must be in your site.

Inside the CSS Classes (optional) field (shown in the 2nd picture, in the menu item), you can type in the unique class as previously suggested. This will allow you to apply specific CSS to that one menu.

So, for a unique class, and an example, your first (left) menu item would be villamenuitem1
In reality, you only need to do this with the first item.

Then, when you have saved the menu, you'd create the CSS like this:
 .villamenuitem1 {margin-left: 100px;}

By applying this to Custom Code > CSS Rules, you move the menu over to the right by 100px. You can adjust that one number as you wish to make the menu look centered. There are other ways to center it, but essentially, this was the easiest.

Attached Files



#17 Jean-Philippe

Jean-Philippe

    Super Member

  • Members

  • 116 posts
  • LocationTokyo
  • Country: Country Flag

Posted 12 June 2013 - 12:19 PM

Just found a possible way to fix it. Add this piece of code:

 
#secondnav ul {display: inline-block}
#secondnav .content-pad {text-align: center}

into your CSS file and that's it!


  • jennajonesdesign likes this

#18 Rob

Rob

    One Smart Egg

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

Posted 12 June 2013 - 01:04 PM

Congratulations Jean-Philippe. 

 

Thanks for the insight.







Also tagged with one or more of these keywords: nav bar, align centre, secondary nav bar