Максим

https://codepen.io/simkaUser/pen/OxzYPR?editors=1100 может быть так ?

для .NAV :
display:table;
margin:auto;

Я не знаю то это или нет но как всегда OK Goolge = result

для начала Google или Yandex поисковики или вы предпочитаете копипастинг ?

это tooltip называется

SVG самое лучшее средство для этих целей

https://jsfiddle.net/bbr7cxjc/2/ так ?

grub rescue> - не о чём не говорит это ?

https://codepen.io/simkaUser/pen/Lzzybb?editors=1100 так ?

винда не переносится ни каким образом ... разве что можно продублировать образ системы через acronis true image
она очень зависит от железа на которое устанавливалось

открываем терминал и погнали :
1) sudo apt-get install lamp-server^
2) sudo apt-get install phpmyadmin
3) sudo gedit /etc/apache2/apache2.conf
и дописываем в самый конец файла вот это -> : Include /etc/phpmyadmin/apache.conf
4) sudo service apache2 restart и учимся

по адресу localhost будет доступен локальный сайт

https://codepen.io/simkaUser/pen/YrZgWX?editors=1100 вроде бы корректно всё отображается ...

https://markgoodyear.com/labs/headhesive/ == называется фиксированный header при скролле

можно расположить абсолютно два элемента , один надо другим в одном общем родителе и при ховер скрыть верхний но так же для нижнего придать для эффекта прозрачность и так же любые другие свойства ... и на ховер .. поставить всё на дефолт через транситион ...

Разумеется мой прошлый пример был 100% шляпой , я подумал и доработал ... до идеальности , смотрите

<svg id="my" width="500" height="300" viewbox=" 0 0 500 300" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
       <defs>
        <pattern id="pattern" width="200" height="200"
           patternUnits="userSpaceOnUse">
    <image id="fon1" xlink:href="http://colourlovers.com.s3.amazonaws.com/images/patterns/2974/2974892.png" x="0" y="0" />
  </pattern>
        </defs>
     <polygon id="myFill" points="0,0 0,300 500,300 500,0" />
  </svg>

*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
}
#my{
  display:block;
  width:100%;
  height:100%;
}
#myFill{
  fill:url(#pattern);
}

ссылка на песочницу : https://codepen.io/simkaUser/pen/XeNWBK?editors=1100

<a href=""> 
  <i>Здесь иконка</i>
  <span>Здесь текст</span>
</a>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

но на это будет ругаться валидатор так как scale отключать на мобилках ни есть гут

Для того элемента что выше подвала дай паддинг-боттом равный высоте подвала