How can I bold just the text in a navigation component in a custom header

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have a custom header with some navigation components and I would like the labels for these navigation components to be bold.
Photo of Curtis Ellingham

Curtis Ellingham

  • 362 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Curtis,

Couldn't you modify the theme for your custom header (i.e. master page)?

Other wise you can 'wrap' your navigation labels with the bold html tag (<b>label</b>').

Thanks,

Bill
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
There are several points that you can try to change the font:
1) create your own theme: You can set your font for navigation in the theme settings
2) theme CSS: you can add additional CSS to the theme to achieve additional customization
3) properties settings on the navigation component. There is an option to add peoperties to the navigation component. I haven't been successful in getting the font to change other than color, though.
4) Page CSS: you can add CSS directly to your page to adjust the font.

There seems to be some conflict if you have a theme that defines the font then you have settings on the component and or/CSS on the theme or page. I have had some trouble getting fonts to do what I want them to do without going back and forth between all four of the above. Hope this helps...
Photo of Curtis Ellingham

Curtis Ellingham

  • 362 Points 250 badge 2x thumb
I can adjust the size in the Navigation section of my theme, but Bold is not one of the options (Italicize is)
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Curtis,

Try adding the bold tag to your navigation label...It's not as elegant as the theme, but it works.



Thanks,

Bill
Photo of Curtis Ellingham

Curtis Ellingham

  • 362 Points 250 badge 2x thumb
I tried addinghte html tag to the label, but it still did not render the text in bold
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
You can try adding this as inline CSS on your page or theme:

.sk-navigation-item {
font-weight: bolder;
}
Photo of Curtis Ellingham

Curtis Ellingham

  • 362 Points 250 badge 2x thumb
Raymond,
That worked perfectly.

Thanks.