OK, I know how to replace images on the side menu within CSS, but I'd like to do more than replace the images and names. So..how does one utilize the Custom Navigation?
Default code is this
<div style='display:none;'>======================================== NAVIGATION: CAMPAIGN SIDE ========================================</div>
<nav id='campaign-nav' role='navigation' class='campaign-public-navigation'>
<ul class='no-bullet nav-links'>
<li class='dashboard active-target campaign-member-only'>
<a href='/dashboard'>
<span class='nav-icon icon op-icon-dash'></span><span class='nav-text'>&nbsp;&nbsp;Dashboard</span>
</a>
</li>
<li class='secrets active-target campaign-member-only'>
<a href='/secrets'>
<span class='nav-icon icon icon-openbook-02'></span><span class='nav-text'>&nbsp;&nbsp;Secrets</span>
</a>
</li>
<li class='front-page active-target'>
<a href='/'>
<span class='nav-icon icon icon-home'></span><span class='nav-text'>&nbsp;&nbsp;Front Page</span>
</a>
</li>
<li class='forum active-target campaign-member-only'>
<a href='/forum'>
<span class='nav-icon icon op-icon-forum'></span><span class='nav-text'>&nbsp;&nbsp;Forum</span>
</a>
</li>
<li class='calendar active-target campaign-member-only'>
<a href='/calendar'>
<span class='nav-icon icon icon-calendar-empty'></span><span class='nav-text'>&nbsp;&nbsp;Calendar</span>
</a>
</li>
<li class='adventure-log active-target'>
<a href='/adventure-log'>
<span class='nav-icon icon op-icon-page'></span><span class='nav-text'>&nbsp;&nbsp;Adventure Log</span>
</a>
</li>
<li class='file-docker active-target campaign-member-only'>
<a href='/files'>
<span class='nav-icon icon op-icon-image-embed'></span><span class='nav-text'>&nbsp;&nbsp;Media Library</span>
</a>
</li>
<li class='wiki active-target'>
<a href='/wikis/main-page'>
<span class='nav-icon icon op-icon-book-wiki'></span><span class='nav-text'>&nbsp;&nbsp;Wiki</span>
</a>
</li>
<li class='characters active-target'>
<a href='/characters'>
<span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;&nbsp;Characters</span>
</a>
</li>
<li class='items active-target'>
<a href='/items'>
<span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>&nbsp;&nbsp;Items</span>
</a>
</li>
<li class='maps active-target'>
<a href='/maps'>
<span class='nav-icon icon op-icon-map'></span><span class='nav-text'>&nbsp;&nbsp;Maps</span>
</a>
</li>
<li class='settings active-target game-master-only'>
<a href='/settings'>
<span class='nav-icon icon op-icon-gears'></span><span class='nav-text'>&nbsp;&nbsp;Settings</span>
</a>
</li>
</ul>
</nav>
<div style='display:none;'>======================================== NAVIGATION: DASHBOARD SIDE ========================================</div>
<ul class='campaign-dashboard-navigation'>
<li class='section dashboard active-target campaign-member-only'>
<a href='/dashboard'>
<span class='nav-icon op-icon-dash'></span><span class='nav-text'>Dashboard</span>
</a>
</li>
<li class='section secrets active-target campaign-member-only'>
<a href='/secrets'>
<span class='nav-icon icon-openbook-02'></span><span class='nav-text'>Secrets</span>
</a>
</li>
<li class='section front-page active-target'>
<a href='/'>
<span class='nav-icon icon-home'></span><span class='nav-text'>Front Page</span>
</a>
</li>
<li class='section forum active-target campaign-member-only'>
<a href='/forum'>
<span class='nav-icon op-icon-forum'></span><span class='nav-text'>Forum</span>
</a>
</li>
<li class='section calendar active-target campaign-member-only'>
<a href='/calendar'>
<span class='nav-icon icon-calendar-empty'></span><span class='nav-text'>Calendar</span>
</a>
</li>
<li class='section adventure-log active-target'>
<a href='/adventure-log'>
<span class='nav-icon op-icon-page'></span><span class='nav-text'>Adventure Log</span>
</a>
</li>
<li class='section file-docker active-target campaign-member-only'>
<a href='/files'>
<span class='nav-icon op-icon-image-embed'></span><span class='nav-text'>Media Library</span>
</a>
</li>
<li class='section wiki active-target'>
<a href='/wikis/main-page'>
<span class='nav-icon op-icon-book-wiki'></span><span class='nav-text'>Wiki</span>
</a>
</li>
<li class='section characters active-target'>
<a href='/characters'>
<span class='nav-icon op-icon-characters'></span><span class='nav-text'>Characters</span>
</a>
</li>
<li class='section items active-target'>
<a href='/items'>
<span class='nav-icon op-icon-backpack'></span><span class='nav-text'>Items</span>
</a>
</li>
<li class='section maps active-target'>
<a href='/maps'>
<span class='nav-icon op-icon-map'></span><span class='nav-text'>Maps</span>
</a>
</li>
<li class='section settings active-target game-master-only'>
<a href='/settings'>
<span class='nav-icon op-icon-gears'></span><span class='nav-text'>Settings</span>
</a>
</li>
</ul>
My thing is...I can't make hide nor hair of this. I'd like to remove severla menu entries, replace the image, change the name displayed, and have the Charact and Item links NOT go to their default pages
If possible though I'd like the Dashboard menu untouched
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
To add something insert the following code into whichever "side" of the navigation that you want it to appear on (the example uses my CSS Help Hub page):
* In the li class line you need to just swap in whichever page you are targeting, using whatever is after the / in the url. This allows it to be affected by class based CSS.
* In the a href line you need to swap in everything that is after 'obsidianportal.com' in the URL, or the entire URL if the address is not hosted on OP.
* in the span class line just swap out the 'CSS Help Hub' portion for whatever you want the link to say in the navigation bar
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
To delete something just delete that section of the code for that particular option. Example, to delete the Maps link delete the following code from whichever side of the navigation that you want it removed from:
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
To change an existing link so that it looks the same but points at a different page do the following:
* change the a href line to point at the new url as outlined in the 'To Add Something' post above
Example:
To change the link that the item link actually points to while retaining all of the existing navbar's appearance -
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
Replacing images is usually done via CSS, not via the custom nav menu. Loose instructions for that process can be found here: https://abersade-testbed.obsidianportal.com/wikis/css-left-navigation-bar
The 'tricky' bit would be in the adding icons for newly introduced lines.
You could opt to change the icons in a backwards sort of fashion by changing the span class line in the custom navigation entry to point at a unique icon, then target that icon (if needed) via CSS to change it using the instructions at the link above.
Example:
* you would change the span class line text where it says op-icon-dash to one of the icons that you aren't using, then target that icon in the manner outlined in the link
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
To reorder items just move where they are in the list in the custom navigation section.
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
To change an existing link so that it says something different but points to the same link:
* change the end of the span class line to whatever you want the link to say in the navigation bar
Example:
To change the Forum link to say Campfire instead -
It should be noted that you can also change the displayed text via CSS.
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
I think that covers everything? If I missed anything just point it out here and I'll address that. Pretty sure that I'm going to add these instructions to my Help Hub so any feedback is appreciated.
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
Thaks Abersade. That clears alot up.
@Thaen Might wanna stickly this one
Done!
Obsidian Portal Developer
Too complicated for me, but I'm glad for the input of @Aberdade and @thaen.
"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