Jump to content


Photo
- - - - -

How to customize Menu Bar

menu navbar

Best Answer Danny , 07 May 2014 - 09:48 AM

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.
Go to the full post


  • Please log in to reply
5 replies to this topic

#1 ffornaro

ffornaro

    Member

  • Members
  • PipPip
  • 26 posts

Posted 06 May 2014 - 02:15 PM

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.

Attached Files



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 May 2014 - 05:21 AM

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.



#3 ffornaro

ffornaro

    Member

  • Members
  • PipPip
  • 26 posts

Posted 07 May 2014 - 09:32 AM

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.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16289 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 May 2014 - 09:48 AM   Best Answer

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.


#5 ffornaro

ffornaro

    Member

  • Members
  • PipPip
  • 26 posts

Posted 07 May 2014 - 12:02 PM

Thank you guys so much.

This is what I needed. It works! :)



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16289 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 May 2014 - 12:08 PM

Awesome and no problem.


  • ffornaro likes this





Also tagged with one or more of these keywords: menu, navbar