Problems with the logo and links. How to customize the Bootstrap menu?

Question

css

You need to make a menu like this.
screenshot.ru/447eed299f64d15ac6b919164ff82c41
At first I thought to make it without Bootstrap, because the landing page decided to make it with it.
They gave a link to a similar menu bootsnipp.com/snippets/featured/navbar-brand-centered
Here's what I got bootsnipp.com/user/snippets/KB8W4
1. Where do I get the indent from the top of the logo?
2. How can I move the links closer to the center, to the logo like on the layout?
3. How to remove the background of the standard bootstrap menu?
4. Why doesn't the menu collapse when the button appears? I press, it unfolds but does not want to fold.
I can't figure out what code is this?

.navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }