Linking to core ID in character pages misses character name

Dethstryke

I have links from my digital gaming platform to wiki / character pages in obsidian portals as hand-outs, essentially.

I leave character pages generally as-is, but the navigation + dragon + banner takes up the whole screen when I go to the base page... I'd much rather the link go directly to the relevant content. For instance, I might have this link:

http://mycampaign.obsidianportal.com/characters/whoeverNPC

and that takes some scrolling down to get to the point.

In order to get to the important content, I've included the ID "character-details" which is the closest ID built-in to where I want to start. So now the link would be:

http://mycampaign.obsidianportal.com/characters/whoeverNPC#character-details

Despite this section ID containing the Character-name title header, the links take me down so that the character name is above the screen, as it were.

Anyone have a suggestion as to how I might get the link to include the name of the character? I'm not against modifying the global CSS for the campaign, I just try to be lean on that. Plus, I'm really trying to decrease my administrative overhead for all of this. :)

Thanks for the look. My campaign is not public so the links are generic, but you can test this with anyone's base campaign.

Basileus

Well, you aren't going to be able to actually change where the link to the ID goes to (and it overlaps because the top bar hangs down). However, a couple workarounds (both CSS):

1) Make the top bar transparent until you hover over it, so it won't obscure the title:

@/* TOP BAR HOVER TRANSPARENCY */
#top-bar {opacity: 0; transition: all 0.3s ease-in-out;}
#top-bar:hover {opacity: 1; transition: all 0.3s ease-in-out;}@

2) Remove the dragon area and extra highlight bars so the title is closer to the top and you don't have to link to the ID:

@/* REMOVES "HIGHLIGHTS" AND SPACE ABOVE BANNER */
.campaign-public-layout .highlight-container {display:none;}
.campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 0px}@