CODEWITHSUNDEEP
htmlcssgitbook
SparkAndShine
SparkAndShine

Reputation: 18027

How do I show GitBook title?

In GitBook, the title shows up while mousing over them by default.

GitBook title hover

I wanna show up the title. I inspect the elements,

<div class="book-header" role="navigation">
    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Preface</a>
    </h1>
</div>

and related CSS is,

.book-header h1 a, .book-header h1 a:hover {
    color: inherit;
    text-decoration: none;
}

I add the following CSS,

.book-header h1 a {
    display: block !important;
}

but it doesn't work.

Update:

I follow the answer from @ED Wu, and add the following code to CSS,

.book-header h1 {
    opacity: 1;
}

The title does show up. However, the left sidebar doesn't show up while I click on 三 (no action) after adding opacity:1. An example is here.

enter image description here

Upvotes: 1

Views: 365

Answers (2)

ED Wu
ED Wu

Reputation: 151

Because .book-header h1 opacity is 0.

Try add this to your css.

.book-header h1 {
   opacity:1!important;
}

Upvotes: 2

Mr Ladusicks
Mr Ladusicks

Reputation: 1

Try this! More about color: inherit here. You can use other property like z-index, opacity and position if it doesn't work too. Thanks :)

.book-header h1 a, .book-header h1 a:hover {
    display: block !important;
    color: #000 !important;
    text-decoration: none;
}
<div class="book-header" role="navigation">
    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Preface</a>
    </h1>
</div>

Upvotes: 0

Related Questions