Reply To: Full Width backgrounds & Header container height?

#22646
Daniel Tara
Keymaster

The website you mentioned placed the logo as a background image, which I wouldn’t recommend, and the logo is indeed resized by the background-size: contain; CSS rule.

What you’re asking for is pretty tricky since your logo is pretty large and you have quite a few navigation items. I have played around with the CSS for a while and came up with the following setup that will raise the size of your logo to 303×56 without altering the functionality of the navbar:

First, go to Appearance → Menus and remove the “Home” link since the logo already points to the home page and removing it will provide more space for the logo.

Then go to Theme Options and uncheck the box “Shrink Fixed Navbar when scrolling” since this setting doesn’t help with a larger logo.

Afterwards click the Design tab and enter the following code under Custom CSS:

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (min-width: 992px) {
    .navbar-large a.navbar-brand {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .navbar-large .site-logo {
        max-height: 56px;
    }

    .navbar-large .nav > li > a {
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-large .sidebar-navbar {
        padding-left: 15px;
        margin-left: 30px;
    }
}

Here’s a screenshot of the result I got: