Fortune: Change a size of the logo

The Fortune theme supports a native WordPress functionality for displaying a logo in the header section of your site.

The initial layout of the site header in the theme is broken into two parts: branding section and navigation section.

The width of the branding section is 30% of the entire width of the site header, while the width of the navigation section is 70% of the entire width of the site header.

So, the initial width of your logo will be 30% of the entire width of the site header.

To change that, we need to modify the initial width of the branding and navigation sections:

@media (min-width: 992px) {
  .site-header .site-branding {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
  }
  .site-header .main-header-links {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
  }
}

Above, you can see a custom CSS which increases the branding section to 40%, and decreases the navigation section to 60%.

Width of the logo during a scroll

Since the theme displays a site header during a scroll, the width of the logo changes in order to avoid usability issues.

You can change the width of the logo during a scroll by using this custom CSS:

@media (min-width: 768px) {
  .site-header .sticky-navigation .custom-logo {
    max-height: 60px;
  } 
}