Fix jupyter notebook toolbar with jupyterthemes and table of contents - jupyter-notebook

Question

I'm running a jupyter notebook after having changed the theme this way
!jt -t oceans16 -T -N -kl
Now the toolbar appears but it overlaps with the code and table of contents. If I scroll down the notebook it keeps hiding the first cells and the table of contents:
This stops once I revert to default
!jt -r
as you can see from here:
Is it a problem from my settings of jupytherthemes or in the table of content from nbextension?

Answer 1

For me, the Table of contents and jupyter notebook is overlapping each other. For your case, try using the code below. You can play with 70% value to get perfect match for your screen.
from IPython.core.display import display, HTML
display(HTML("<style>.container { width:70% !important; }</style>"))

Answer 2

Code in ~/.jupyter/custom/custom.css overwrites the default settings with those by jupyter themes.
The default jupyter settings don't have the overlapping toolbar problem.
The code section below seems to be causing the problem. Simply comment this section out as shown.
/*
div#maintoolbar {
position: absolute;
width: 90%;
margin-left: -10%;
padding-right: 8%;
float: left;
background: transparent !important;
}
#maintoolbar {
margin-bottom: -3px;
margin-top: 0px;
border: 0px;
min-height: 27px;
padding-top: 2px;
padding-bottom: 0px;
}
#maintoolbar .container {
width: 75%;
margin-right: auto;
margin-left: auto;
}
*/

Answer 3

The answer to - how to revert to normal.
When Jupyter note is started, don't run the above command and it will return to normal. M
Moreover, you can run code like - display.max_columns to 'None' to run to default.
%matplotlib inline
pd.set_option('display.max_columns', None)
pd.set_option('display.max_rows', 100)

Answer 4

In your ~/.jupyter/custom folder, edit the custom.css file and remove the line: position:absolute; under div#maintoolbar {. This should set the toolbar to be the same as it is under the default Jupyter theme.
I also untick the options "Widen the display area to fit browser window" and "Move notebook's title and menu on the left instead of being centered" in the Nbextensions' Table of Contents options. Personally I find that gives me a better look when using Table of Contents with the toolbar.