Archived

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

  • 0

Resolved How to center-align the Fixed Navbar?


Question

Posted · Report post

Hi there,

I am trying to center-align the menu items in my fixed navbar and also have them spread out so they are wide enough to fill up the whole navbar (the same width as the content area), however cannot figure out how to do so.

In the options, I noticed that there were options to either left-align it or right-align it but nothing to center-align it - which is why I am here!

My site is http://www.aprilialove.com

I would also like to know how to change the font of these menu items? Is there an option or will I need to insert some code into the CSS sheet?

Thanks!

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi,

Add the following code:


#site .section-navbar.fixed-top .navline { text-align: center; float: none; }
#site .section-navbar.fixed-top .navline > li { float: none; display: inline-block; }[/CODE] If you do not wish to have your drop down menus aligned center, use the following code:
[CODE]#site .section-navbar.fixed-top .navline > li > ul > li { text-align: left; }
If you wish to give a larger space between menu items add the following code:
#site .section-navbar.fixed-top .navline > li > a { padding: 10px 25px 10px; }[/code]

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

Thanks for this - your help is much appreciated!

How do I actually change the font of the menu items though?

Share this post


Link to post
Share on other sites

Posted · Report post

You can change your menu item font family by selecting what font you like in PageLines > Site Options > Typography.

However, you can also target them using CSS, add the code below and add your preferred font family.

#site .section-navbar.fixed-top .navline > li > a { font-family: Add font here; }[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

Great, thanks for your help.

You can now close the case as the problem was resolved! :)

Share this post


Link to post
Share on other sites

Posted · Report post

Dear

I've tried to add this code to the css, but it don't work. Is there an other place where i need to add this code?

Thanks a lot for your help

 

Share this post


Link to post
Share on other sites

Posted · Report post

Add the code to Dashboard > PageLines > Site Options > Custom Code.

 

Please note, this topic is marked closed. If you have further questions, kindly open a new topic.  Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites
This topic is now closed to further replies.