Jump to content
groves

Aligning 2Nd Nav Bar To Centre

Recommended Posts

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

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
groves    0
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

Share this post


Link to post
Share on other sites
groves    0
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

Share this post


Link to post
Share on other sites
groves    0
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

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

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


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
groves    0
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

Share this post


Link to post
Share on other sites
catrina    103
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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
groves    0
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

Share this post


Link to post
Share on other sites
groves    0
groves

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
Rob    547
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;}[/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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jean-Philippe    2
Jean-Philippe

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!

  • Like 1

www.photoreview.fr | www.kankei.fr

Share this post


Link to post
Share on other sites
Rob    547
Rob

Congratulations Jean-Philippe. 

 

Thanks for the insight.


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • ericbc
      By ericbc
      I have the WHP6 theme (not sure if I needed it). But heres my question....I want to change the font in the navigation bar and it doesn't give me that option. I also want to change the size of the nav bar (height).
    • hackworth
      By hackworth
      I'm working in the demo and I set the nav bar bg image and nothing happens. What am I doing wrong?
       
      http://hackworth.pagelines.net/
×