15 replies to this topic

[groves]

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

[Rob]

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.

[groves]

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

[catrina]

Hello Groves,

What CSS classes did you enter?

[groves]

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

[catrina]

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

[groves]

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

[Jenny]

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

[groves]

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

[catrina]

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?

[groves]

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

[catrina]

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

[groves]

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

Groves

[catrina]

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?

[groves]

Catrina

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

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


Groves

[Rob]

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

•  11-10-2012 12-52-42 PM.png   210.74K  15 downloads
•  11-10-2012 12-56-24 PM.png   17.22K  15 downloads