Changing the Nav Bar titles


I'm looking to change the words displayed for the default OP navigation bar. I'm not looking to fully replace the navigation menu or use images for the links, I simply want to change the words used in the default navigation bar. How would I go about doing this?


  • thaen
    Posts: 1,079

    This isn't necessarily a simple thing to do, but here's one way to do it.  It hides the current words, and then attaches a "css content" to the still visible icon, which is actually a special font.

    .nav-icon.op-icon-dash::after {
    content: " My Dashboard Name"

    .nav-icon.icon-openbook-02::after {
    content: " My Secrets Name"

    /* Add other menu item names here */

    .campaign-dashboard-layout #dashboard-main-nav ul li .nav-icon {
    width: 100%;
    font-size: 15px;

    .campaign-dashboard-layout #dashboard-main-nav ul li .nav-text {
    display: none;


    Obsidian Portal Developer

  • Conan_Lybarian
    Posts: 240

    This is my go to. I can post the dashboard too- it's pretty similar. Just change the names to what you want

    #campaign-nav .nav-text {font-size:0;}

    #campaign-nav .secrets a:after {content:"Secrets";}

    #campaign-nav .dashboard a:after {content:"Dash";} 

    #campaign-nav .adventure-log a:after {content:"Fights";} 

    #campaign-nav .wiki a:after {content:"Rules";} 

    #campaign-nav .characters a:after {content:"Combatants";}

    #campaign-nav .forum a:after{content:"FFL Forum";}

    #campaign-nav .public-forum a:after{content:"FFL Forum";}

    #campaign-nav .calendar a:after {content:"Schedule";}

    #campaign-nav .settings a:after {content:"Settings";}

    #campaign-nav .front-page a:after {content:"FFL";}

    #campaign-nav .maps a:after {content:"Play Books";}

    #campaign-nav .items a:after {content:"Supplies";}

    #campaign-nav .file-docker a:after {content:"The Gallery";}

  • tommy19
    Posts: 62

    Thank you both for the replies! I went with Conan_Lybarian's because it was simple and did exactly what I wanted. But I really appreciate both suggestions!

  • Conan_Lybarian
    Posts: 240

    No problem @tommy19! Also, if you want the dashboard/back end to match, use the same script, but replace  #campaign-nav with #dashboard-main-nav

  • tommy19
    Posts: 62

    @Conan_Lybarian Thank you. I might just do that! :)

  • Abersade
    Posts: 421

    You can use the following code to customize the images shown to the left of the titles as well:

    .op-icon-dash {content: url("your image here");}
    .icon-home {content: url("your image here");}
    .op-icon-forum {content: url("your image here");}
    .icon-calendar-empty {content: url("your image here");}
    .op-icon-page {content: url("your image here");}
    .op-icon-image-embed {content: url("your image here");}
    .op-icon-book-wiki {content: url("your image here");}
    .op-icon-characters {content: url("your image here");}
    .op-icon-backpack {content: url("your image here");}
    .op-icon-map {content: url("your image here");}

    Interestingly the code above for .op-icon-forum also changes the image shown for the Stream.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • thaen
    Posts: 1,079

    In case someone comes across this in the future, there is now a Custom Navigation area in the Advanced tab that will also support all of this.  You can use the Insert Sample button to get HTML to duplicate the default navigation and then change only the parts you want, like the words, or the icons.

    Obsidian Portal Developer

  • twiggyleaf
    Posts: 2,011


    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!