Create header with logo and site icon

[bobbingwide]

@andrewmleonard suggested making the theme look like WordPress.org in terms of style. He developed an SVG for the site logo and as a site icon. Now I need to attempt to implement them in the header.

After a lot of fiddling with Global Styles we managed to get the header to look a bit like what it should look like.

• A site title link
• A search box
• A primary menu
• And a Get button
• with a blackish background and greyish text

Suffice it to say it's a long way off.

Requirements

• Use an SVG logo for the site logo - replacing the site title
• Use a transparent PNG file for the favicon

Here's a screenshot for 'desktop' display.

• [x] The underlined site title needs to be replaced by the site logo
• [x] There's an unwanted white margin
• [x] The search box has a label above it
• [ ] The search box background is white not black
• [x] The current menu item isn't highlighted in blue
• [ ] There's no fancy blue arrow under the current menu item
• [x] The fonts are wrong
• [ ] The blue "Get" button doesn't hide

[bobbingwide]

Here are screenshots when the window is sized down.

• make.wordpress.org switches to a hamburger menu.
• The header should also include the WordPress Multi Site title
• And a submenu

Note: WordPress.org uses the p2theme

[bobbingwide]

The search box background is white not black There's no fancy blue arrow under the current menu item The blue "Get" button doesn't hide

Never mind, wordpress.org's header changed with WordPress 5.9