Dúvidas noobs navbar boostrap

Front-end CSS
#1

Fiz todo um site em boostrap para aprender, porém fiquei com 2 dúvidas básicas
Tive problemas com o navbar e outra é de CSS

1- Como adicionar aqueles quadradinhos responsivos? Não consegui achar a opção…
Queria que ao diminuir a tela (redimencionar)
Só ficasse mostrando a LOGO



    • E o resto ficasse naqueles quadradinhos que ficam no telefone

    Como está ficando IMGS:

    2- Se eu quiser colocar um link na imagem, como o index.php




    • Como eu faço pras regras do CSS de a não serem aplicadas ao a do IMG, para as regras do img sobreporem a da a, tenho que criar uma div?

    Código full:
    inicial2.php

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="css/navbar.css" rel="stylesheet">

    <title>NAVBAR</title>
  </head>
  <body>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- navbar aqui? -->





  <header>
  <div class="header" id="header">
    <nav class="navbar navbar-expand-md fixed-top" style="background-color: #083F2C;">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
           <img src="img/logo-navbar.png" alt=""/>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">OFFICE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">POLITICALS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">INFO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">NEWS AND EVENTS</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             DROPBOX
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="dpboxheader">
              <a class="dropdown-item" href="#">ITEMMENU</a>
              <a class="dropdown-item" href="#">ITEMMENU</a>
              <a class="dropdown-item" href="#">ITEMMENU</a>
              <a class="dropdown-item" href="#">ITEMMENU</a>
              <a class="dropdown-item" href="#">ITEMMENU</a>
              <a class="dropdown-item" href="#">ITEMMENU</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">CLIENT CARE</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  </header>
</body>
</html>

    navbar.css

    .header {
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.header img {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  padding: 1px 0 1px;
  text-transform: uppercase;
}

.header a {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  padding: 1px 0 1px;
  padding-top: 30px;
  text-transform: uppercase;
}

.header a:hover {
	color: grey;
}

.dropdown-menu {
  background: #EDEFF1;
  height: auto;
  width: 100%;
  padding-left: 5px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #DDDDDD;
}
.dropdown-menu a {
	color: #78828D;
	font-size: 12px;
}
    #2

    Estude CSS antes de usar CSS pronto, senão sempre vai ficar perdido.

    #3

    Oloco que desnecessário…
    Eu vi uma serie de videos e com a serie eu fiz um site todo do 0
    Só tive problemas com o navbar, porque eu to fazendo esse test site pra ver como é o boostrap

    Realmente não vi nada de boostrap só to seguindo a wiki do site como, mas fiz o navbar como um dos exemplos, e o do exemplo está responsivo e direitinho, o meu não:

    E sobre a segunda pergunta de sobrepor, não to tendo problemas com isso, mas não sei como pesquisar, se der pra fazer, que deve dar deve ser interessante

    Se tiver alguma video aula pra me recomendar em vez de jogar pedras,pode passar
    Abs!

    #4

    Olá, Seu código ta incompleto,

    na parte do logo, adiciona abaixo da >>

    <div class="collapse navbar-collapse" id="navbarCollapse">

<div class="container-fluid">
  <div class="navbar-header">
  <a class="navbar-brand" href="#myPage">Logo</a>
</div>

    Vc esqueceu de adicionar o menu responsive na barra, quando redimensionar ele tinha que aparecer pra abrir as opções.

    #5

    Quanto ao Bootstrap: você esqueceu de colocar alguns códigos no HTML, como disse a @N4TH. Por isso, estou deixando esse link pra você dar uma lida:

    Quanto a questão da tag <a>, você pode usar pseudo-classes.

    Dessa maneira, você usaria a pseudo-classe :not(), de tal forma:

    HTML

    <a href="http://exaple.com" class="img-link">
    <img src="img/gatinho.jpg">
</a>

    CSS

      a:not(.img-link) {
        _declarações..._
    }

    Note que essa pseudo-classe seleciona todos os elementos âncoras (<a>), menos aqueles que tem a classe .img-link. Além do mais, podes utilizar qualquer classe, elemento ou id que desejar.

    Referências para estudo

    #6

    Uma coisa importante é que vc chamou o JQuery, o Popper e JS do Bootstrap bem no inicio do body, mas o correto é adicioná-los no fim, depois de todo o resto.

    #7

    Bom dia, amigo!
    Neste vídeo abaixo você verá como fazer um menu responsivo do 0 com apenas HTML5 E CSS3 de uma forma bem dinâmica e simples.