Problem with linking headers

Hello,
I am trying to link only headers. The problem is, when linking them and clicking on the link, it selects the whole area even below the header. I work with a lot of lists and collapse them when not needed but once I click on such a link all lists under that header get uncollapsed which is pretty annoying. How can I only link the header? I tried with blocks but that often does not work as it says block does not exist etc. Only when adding the block manually it works. But that’s a pretty bad workaround and just linking headers is easier.

What I use:


[[#Area]]
#### Area
A list
- list in list
	- list value
	- list value
	- list value 
Another list:
- another list in list
	- list value 
	- list value
	- list value
	- list value

How it looks when clicking “Area” link:
obsidian_area

The workaround is by adding a “^” to both “Area” words, like this:


[[#^Area]]
#### ^Area
A list
- list in list
	- list value
	- list value
	- list value 
Another list:
- another list in list
	- list value 
	- list value
	- list value
	- list value

Then it works but makes it a bit “uglier” due to the symbol.

Hope someone has an idea! The problem isn’t the linking itself but that it selects the whole thing and uncollapses all its content instead of just marking/selecting the header (in my case the “Area” word).

Have you tried adding a blank line after the heading? I’m a little lazy right now, most blocks in Obsidian are most well behaved with a blank line after them.

Yes, it unfortunately still selects everything until the next heading that is smaller than itself, i.e., it will even select ### header but not ## header

Example:
obsidian header

Code:


[[#Header]]
## Header


### Header smaller


# Header bigger

Ok so it seems like I found the “issue”. In editing mode the problems I mention occur. In view mode, however, they don’t. I use editing mode but with preview mode combined, I don’t know what it’s called, but there the problems occur as said. It would be great if linking headers also would work properly in the mode I use/edit mode.

There are three modes:

  • source mode – Editing with the pure text
  • live preview – Renders the markdown, with exception of the active element, and allows for editing
  • reading mode – The pure rendered version, no edit capabilities (except through buttons or similar)

(TMI: The two first used a different markdown engine compared to reading mode, namely CodeMirror, so even with rendering there might be differences between the last two rendering modes)

Ok, back to your issue. The link is to the header, if embedded the link will include all what you see flashes by. I’ve not done it, but it’s not unlikely you can turn off that flashing, but the link will be towards that header (and section beneath anyways).

1 Like

Thank you very much! That “flashing” word is where it made click.
I “fixed” this with the following CSS:

.is-flashing {
    transition: none !important
}
:not(.cm-active) > .is-flashing {
    background-color: transparent !important
}

This will set the background color (the yellow color) to transparent if the parent does not have the css class “cm-active”, which usually is e.g. the header where the cursor will go when clicking the link. I also disabled the transition because sometimes it still selected some text for a split second. This only hides the problem (literally, lol), but enough to make it look way better.

This now looks exactly as I wanted it:
obsidian header fixed

1 Like