• 0

How to customize Menu Bar


Question

Posted · Report post

Hi all,

 

I need to customize my menu on DMS. Some questione for you:

 

- How can "center" the menu? Do I need some CSS trick?

- Can I change menu items font?

- Why can't I change the menu bar background? I uploaded an image but it is not shown, the background is still white.

 

Your help is very appreciated.

 

Thank you so much.

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

To use a background image for you Navigation Bar, you will want to set the Color Scheme to the SELECT option, then upload your background image.

 

To center your NavBar menu items, use the following code:

 

#site .navline {
float: none;
text-align: center;
}
 
#site .section-navbar .navline > li {
display: inline-block;
float: none;
}
 
You will likely need to disable the searchbar, as it will probably knock the alignment off slightly.
 
To change the custom font, you will need to use the code James provided, which does work for web safe fonts. However, if you're trying to use a custom font or one from Google Webfonts etc.. then you will need to load the font, you can do this by adding the link to the font in your custom scripts panel. It is difficult to assist you further with this, as we do not know what font you're trying to use.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there

 

To change the background color for the fixed nav you'll need to check the 'enable background color' option in the section options, then use the color picker to choose your color - http://screencast.com/t/vJx88wguD

 

The fonts for the site are set in site settings > typography - http://screencast.com/t/yzCPRXeXTh this controls the fonts for all text on the site, including the navbar. If you want to just change the fonts in the navbar you'll need to use some css.

 

.section-navi .pl-nav > li > a {
    font-family: comic sans ms;
}

 

The menu is automatically set to float right as your logo floats left. You would need to use css to apply a margin on the right of the nav menu to move it towards the center.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James,

 

thank you for your support. I added the CSS code inside Site Settings -> Advanced, but the font in the navbar didn't change. Am I doing something wrong?

 

Thank you so much.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you guys so much.

This is what I needed. It works! :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome and no problem.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

To use a background image for you Navigation Bar, you will want to set the Color Scheme to the SELECT option, then upload your background image.

 

To center your NavBar menu items, use the following code:

 

#site .navline {
float: none;
text-align: center;
}
 
#site .section-navbar .navline > li {
display: inline-block;
float: none;
}
 
You will likely need to disable the searchbar, as it will probably knock the alignment off slightly.
 
To change the custom font, you will need to use the code James provided, which does work for web safe fonts. However, if you're trying to use a custom font or one from Google Webfonts etc.. then you will need to load the font, you can do this by adding the link to the font in your custom scripts panel. It is difficult to assist you further with this, as we do not know what font you're trying to use.

 

Do you know the CSS code to center the whole navbar?

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