Archived

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

  • 0

Aligning 2Nd Nav Bar To Centre


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

17 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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!

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Congratulations Jean-Philippe. 

 

Thanks for the insight.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Groves

Share this post


Link to post
Share on other sites

Posted · Report post

Hello Groves,

What CSS classes did you enter?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;}[/CODE]

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.

post-6-0-40608500-1352570737_thumb.png

post-6-0-02233400-1352570747_thumb.png

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites